SOLVED: CSS media queries don't apply on query loops

Bugs
1

Hey guys,

Here is how to reproduce the bug:

  1. create a query loop container
  2. add any css inside the CSS field using root {background: red;} on desktop
  3. now switch to any breakpoint - like tablet - and write root {background: green;}

On a normal element, the custom css is generated using the correct media query, but on query loop element, the css is only generated for desktop (without media query) and the media queries are not generated for different breakpoints.

Regards,
Maxime

4 Likes
2

If you check your page source, does it apply the CSS to the element ID instead of the class? When a query loop is created, the id is moved to the class but it looks like using root still references the id.

3

I have no classes set on this query loop. The issue is related to the breakpoints not created.

4

What I mean is that, when you create a query loop, the ID is moved to the class while root {} is still referencing the ID.

Let’s say that your element’s ID is “rjxffd”, if you check your page source do you see #brxe-rjxffd {background: green;} and if so, does that element actually have that ID, or does it have “brxe-rjxffd” as the class?

5

I have hard time to understand how does that matter for the breakpoint creation…

6

I’ve just recreated your setup in a query loop. Have a look at the CSS below and you’ll see that inside the media query, it’s targeting the ID instead of the class. The ID does not exist on the page because it was converted to a class when the query loop is enabled. It displays correctly while in the builder but not on the frontend.

This is a bug.

Screen Shot 2022-10-28 at 11.09.33 AM

Screen Shot 2022-10-28 at 11.07.06 AM

7

It makes more sense now :slight_smile:

From your example, it looks like it correctly target the generated class using root, but switch back to the ID when generating breakpoints - which sounds a bug to me…

8

Hi Maxime,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.
Thanks @zestjosh for pointing this out. You are completely right :+1:

Best regards,
timmse

9

Hey @maximebeguin,
Bricks 1.6 beta contains a fix for this problem. However, we would be happy if you could briefly test whether the problem is fixed so that we can include it in Bricks 1.6 stable.

You can find the beta version in your account:
https://bricksbuilder.io/account/?v=1.6-beta

Best regards,
timmse

1 Like