I’ve seen this bug for a while now, and keep waiting to see someone else posts it or if it gets fixed otherwise, because it’s pretty obvious and totally annoying.
Basically, if I apply some styles to an ID of an element that is inside a query loop, the styles appear fine in the builder but are not rendered in the front end.
Example:
I’ve applied padding of 2rem and a row-gap of 2px to a DIV inside my query loop. It looks fine in the builder (other than the fact that it only shows the first loop item but not with any real data…but thayt is another issue).
HTML id is not meant to style multiple elements at once. It is meant to target a specific element and must be unique on a page.
In CSS, we use classes to style multiple elements, so why not use classes in query loop?
That said, I agree it could be confusing for beginners or people not knowing HTML/CSS.
An idea could be to automatically generate classes for query loop subitems and transfer id styling to classes?
Unfortunately, I am not able to reproduce the issue. The only known issue is, when using a custom ID on the query element or inside the loop the styles are applied to the default selector:
But as far as I can see from your screenshots, you’re using the default ID selector, which changes to a class anyways