elementor / elementor/elementor

Gallery (Pro) Justified layout renders no images in 767–1023px range when Tablet Portrait breakpoint is set to a custom value

Open
#36,417 0 comments 0 reactions 0 assignees View on GitHub
status/awaiting_triage
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Description

When the Tablet Portrait breakpoint is changed from its default 1024px to any custom value above 1024 (tested with 1179px), the Gallery (Pro) widget with Layout: Justified renders no images at all for viewports between 767px and 1023px. Images display correctly below 767px and at 1024px and above.

Inspecting the rendered markup in the broken range shows the e-gallery layout engine producing invalid CSS custom properties on the container and items:

https://github.com/user-attachments/assets/c91238f8-65c7-42d8-8aaf-53c55e7d96a6

Working with Tablet Portrait Breakpoint set at default 1024px:
Image

Broken with Tablet Portrait Breakpoint set at 1179px:
Image

At 1024px and above, the same gallery outputs valid values (--hgap: 24px, --item-height: 32.5084...%, etc.) and displays correctly using the row height configured for the Tablet device.

Suspected cause: the e-gallery library ships with built-in default breakpoint buckets keyed at 1024 and 768 (containing gap/column defaults but no rowHeight). Elementor Pro passes its per-device settings keyed by the site's actual breakpoint values. With default site breakpoints, the widget's tablet bucket (1024) overwrites the library's built-in 1024 bucket. With a custom tablet value (e.g. 1179), the library's built-in 1024 bucket survives the merge with no rowHeight and undefined gaps, and any viewport in 767–1023 resolves to that orphaned bucket — producing NaN in the justified layout math and zero-height items.

This reproduces on a completely fresh WordPress install with only Elementor + Elementor Pro active and the Hello theme.

### Steps to reproduce

1. Fresh WordPress install, Hello theme, Elementor + Elementor Pro only.
2. Add a Gallery (Pro) widget with several images, set Layout: Justified.
3. Confirm the gallery displays correctly at all viewport widths with default breakpoints (Tablet Portrait 1024, Mobile Portrait 767).
4. In Site Settings → Layout → Breakpoints, change Tablet Portrait from 1024 to 1179. Save and regenerate CSS.
5. View the page at a viewport width between 767px and 1023px (e.g. 1023px).
6. Observe: gallery container renders but all images are invisible; inspected markup shows --item-height: NaN%, --hgap: undefinedpx, --container-aspect-ratio: NaN.
7. Resize to 1024px or wider, or 766px or narrower: gallery displays correctly.

### Expected behavior

The Gallery widget with Justified layout should render images at all viewport widths regardless of the Tablet Portrait breakpoint value. With Tablet Portrait set to 1179px, viewports from 768–1179px should use the Tablet device settings (row height, spacing), exactly as viewports in that device range do when the breakpoint is left at its default. Changing a breakpoint value should never produce a viewport range where the gallery resolves no settings at all — the widget's per-device values should apply across the full custom range, with no orphaned 767–1023px band falling back to undefined values.

### Elementor System Info

```txt
== Server Environment ==
Operating System: Linux
Software: Apache/2.4.67 (Debian)
MySQL version: mariadb.org binary distribution v10.6.27
PHP Version: 8.3.31
PHP Memory Limit: 1536M
PHP Max Input Vars: 10000
PHP Max Post Size: 200M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 7.0
Site URL: https://wordpress-xxxxxxx-xxxxxxx.cloudwaysapps.com
Home URL: https://wordpress-xxxxxxx-xxxxxxx.cloudwaysapps.com
WP Multisite: No
Max Upload Size: 200 MB
Memory limit: 40M
Max Memory limit: 1536M
Permalink Structure: /%postname%/
Language: en_US
Timezone: 0
Admin Email: xxxxx@xxxxxxxx.com
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor
Version: 3.4.9
Author: Elementor Team
Child Theme: No

== User ==
Role: administrator
WP Profile lang: en-US
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36

== Active Plugins ==
Elementor
Version: 4.1.4
Author: Elementor.com

Elementor Pro
Version: 4.1.2
Author: Elementor.com

== Features ==
Custom Fonts: 0
Custom Icons: 0

== Integrations ==

== Elementor Experiments ==
Inline Font Icons: Active by default
Additional Custom Breakpoints: Active by default
Container: Active by default
Optimized Markup: Active by default
Panel Promotions: Active by default
Default to New Theme Builder: Active by default
Header & Footer: Active by default
Elementor MCP WP Abilities API: Inactive by default
Pro Free Trial Popup: Active by default
Nested Elements: Active by default
Pages Panel: Inactive by default
Atomic Widgets: Active by default
V4 Indications Popover: Inactive by default
Enforce atomic widgets capabilities: Active by default
Editor MCP for atomic widgets: Active by default
Backward compatibility migrations: Active by default
CSS Grid: Inactive by default
Editor design system panel: Active by default
Global Classes: Active by default
Enforce global classes capabilities: Active by default
Variables: Active by default
Variables Manager: Active by default
Editor v4 (Opt In Page): Active by default
Editor V4: Active by default
Components: Active by default
Interactions: Active by default
Widget Creation: Active by default
Generate website markdown: Inactive by default
Import/Export Customization: Active by default
Site Builder: Inactive by default
Elementor Editor Events: Active by default
Atomic Form: Active by default
Collection Loop: Inactive by default
Menu: Active by default
Size Variables: Active by default
Pro Interactions: Active by default
In-Editor Feedback: Inactive by default

== Log ==

== Elementor - Compatibility Tag ==

Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==
```

### Agreement

- [x] I confirm I have read and followed all the guidelines and instructions outlined in the Elementor Bug Report form.
- [x] I agree that my issue may be closed without further action if it doesn't meet all the requirements outlined in the Elementor Bug Report form.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the Gallery (Pro) Justified layout with Tablet Portrait set to 1179px, then inspect the e-gallery breakpoint settings and generated CSS custom properties between 767px and 1023px. Compare the custom-breakpoint behavior with the default 1024px configuration; done means valid gap, item-height, and container-aspect-ratio values produce visible images across every viewport range.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.