DUPLICATE: Page settings: Custom CSS gets "max-width:desktop" media query applied to it

Bugs
1

Browser: Chrome 110
OS: ANY
URL: https://proremod.com

So site is setup as mobile first for breakpoints. Trying to get the sticky header to only apply at wider breakpoints and used this code from Brickslabs but could not get it to work no matter what. Did some digging and noticed that any code placed in the Settings>>Page Settings>>Custom Code>>Custom CSS gets a media query tag applied on top of anything placed in there, even if there is a media query already.

@media (min-width: 1279px)

Confirmed by placing the code without any media queries and it still applied this.

Screenshot 2024-06-28 at 11.10.31 AM
Screenshot 2024-06-28 at 11.10.31 AM1032Ă—1312 58.2 KB

Screenshot 2024-06-28 at 11.11.06 AM
Screenshot 2024-06-28 at 11.11.06 AM710Ă—760 76.6 KB

Ignore that the underlying code is a little different as I was testing multiple ways and screenshots were taken at different times.

EDIT: Just tested on another site with mobile-first, and the same thing happens. Tested it on a site with normal breakpoints, and it works normally.

2

To apply a sticky header only at wider breakpoints, ensure your CSS uses correct media queries. Avoid placing styles in the “Custom CSS” section if it adds additional media queries automatically. Instead, place your custom CSS in an external stylesheet or inline within the HTML.

3

Hi jdang,
Thanks so much for your report.

The page settings are currently not breakpoint aware. However, we are working on a solution.
The problem has already been reported some time ago:

I’ll close this thread accordingly. We’ll update the original thread as soon as we’ve fixed the issue.

Best regards,
timmse