❌ Incomplete Issue: Media Query for Widescreen Breakpoint (1440px) is rendered inversed

[nesadiyajatin]

Description

I discovered a responsive CSS bug in Elementor involving the 1440px breakpoint.

Elementor is generating the following CSS for the container:

@media (max-width:1440px) and (min-width:768px) {
   .elementor-30 .elementor-element.elementor-element-7502182 {
       --width: calc(33.33% - 13.33px);
   }
}

@media (min-width:768px) {
   .elementor-30 .elementor-element.elementor-element-7502182 {
       --width: calc(33.33% - 20px);
   }
}

What is the problem?

Elementor uses max-width:1440px instead of min-width:1440px.

As soon as the screen becomes 1441px or larger, the 1440px rule stops working.

Elementor then falls back to the min-width:768px rule, which breaks the layout on large desktops.

Result:

The design appears correct from 768px → 1440px, but completely wrong on >1440px screens (e.g., laptops, iMacs, 1920px monitors, 4K monitors).

This affects container width, spacing, and overall layout because Elementor uses a CSS variable --width for flexbox container calculations.

This behavior does not match expected responsive logic.

[after-responsive.css](https://github.com/user-attachments/files/23633970/after-responsive.css) [before-responsive.css](https://github.com/user-attachments/files/23633969/before-responsive.css)

Steps to reproduce

1. In Elementor, create a container-based layout.
2. Apply responsive width settings for Desktop and Widescreen breakpoints.
3. Save and inspect the frontend using Chrome DevTools.
4. Open the generated CSS file under: /wp-content/uploads/elementor/css/post-XX.css
5. Observe that Elementor outputs:

• @media (max-width:1440px)
• instead of @media (min-width:1440px)

6. View the page at:

• 1400px (layout looks correct)
• 1500px / 1600px / 1920px (layout becomes incorrect due to fallback to 768px rule)

messgae.txt

Expected behavior

Elementor should generate min-width:1440px for widescreen (Desktop+) breakpoints.

Correct expected output:

@media (min-width:1440px) {
   .elementor-30 .elementor-element.elementor-element-7502182 {
       --width: calc(33.33% - 13.33px);
   }
}

This ensures larger screens inherit the correct layout instead of reverting to tablet/desktop-flex rules.

1. Elementor generates max-width instead of min-width.
2. Wide screen (1441px to 2560px) layouts break.
3. Container width becomes inconsistent.
4. Flexbox calculations (based on --width variable) produce incorrect layout.

Elementor System Info

== Server ==
PHP Version: 8.1
Web Server: Apache
Memory Limit: 512M

== WordPress ==
Version: 6.8.3
Theme: my custam Theme

== Elementor ==
Version: 3.33.1
Elementor Pro: No
Container Layout: Enabled
Additional Breakpoints: Enabled

== Browser ==
Chrome latest version
OS: Windows 10

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Elementor Bug Report form.
• 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.

[nicholaszein]

Hello @nesadiyajatin, how's it going?

Your issue is missing crucial information that makes it impossible to figure out what is happening on your site. For what is worth, when we tested widths applied to Containers in different breakpoints, the values generated are correct.

Please, clarify the following information, and update your current issue (don't open multiple duplicate issues please):

1. Please take a screenshot of your Additional Breakpoints settings panel in the Editor → Elementor Logo Menu → Site Settings → Layout Settings → Breakpoints We want to know what are the settings for all breakpoints, including and most importantly for the Widescreeen breakpoint. By default it should be 2400px. Which does not match your reported settings.
2. On the same panel, please go back to Layout Settings and take a screenshot of this section as well.
3. Explain how you've built the section in question and why the values are using a calc() function when the default value for a 4 column layout is 25%. We need better steps to reproduce, including the context and how you've built your designs.
4. Please take screenshots of your container settings for all breakpoints.
5. ⚠️ This is IMPORTANT: Edit your original issue above (see screenshot below) and in the Elementor System Info include all the sections in the report that you copied and pasted in this field originally. There is crucial information there that we need to verify to understand your case, reproduce it, and find the root of the issue. Without this information we will close this issue for not following our Contributing Guidelines for reporting Bugs.

For items 1 through 4 you can record a video instead. If you don't know how, you can use Loom and record 5 minutes for free. More than enough time to show us the information we are looking for.

Warning

Spamming this repository with multiple duplicates of the same issue is against our Contribution Guidelines and Code of Conduct.
Please, open only one issue. If you need to Edit your issue, do it on the existing issue.
If you continue to open new issues we will be forced to ban you from this repository. Please respect our guidelines.

Let me know when you have the missing information and we may continue from there.

Kind regards