Bricks Version: 1.6 Beta
Browser: Chrome, Firefox
OS: Windows
URL: https://wordpress-821512-3055446.cloudwaysapps.com/multipurpose-two-home/
Everything looks good in backend. But completely broken on frontend.
1 Like
if you mean the top section, it’s because of this CSS rule that has been added to the page… it’s overriding the absolute positioning.
#brxe-533864 > * {
position: relative;
}
1 Like
I didn’t add any overwrite rule. This template was imported from library build with 1.5.7.
Did you maybe check this setting in Bricks > Settings > General? As @wplit stated removing the #brxe-533864 > * rule seems to fix your page.
1 Like
This might not be the solution. It’s for older version. I am talking about 1.5.7 to 1.6 Beta 2. The layout should not be breaking or add some weird overwrite rule after updated. The layout should work the same as 1.5.7
1 Like
Hi Min,
Thanks so much for your report!
The problem arises from the section’s overlay setting. The overlay is positioned absolutely so that the child elements must have a position other than static. And this is where #section-id > * { position: relative; } comes into play, giving each direct child element position: relative.
We introduced this rule because we got a lot of reports like “the overlay covers my elements” and wanted to make it easier for the majority of users.
Because the rule is relatively “heavy” due to the child selector, your position: absolute settings on the child elements are overwritten, which is of course an undesirable side effect in this case (but only occurs if you use position: absolute on the children).
To overwrite the child selector, the only thing that helps is the sledgehammer called !important. Either you add root { position: absolute !important } to every absolutely positioned child element, or you create a helper class that does exactly the same.
Alternatively, you can omit the overlay setting of the section and create the overlay with a simple div.
Best regards,
timmse
1 Like
Thanks, @timmse. I will use sledgehammer.
1 Like
Suggestion: Bricks could instead add it as…
:where( #section-id > * ) {
position: relative;
}
This way the default position of children inside the section with the overlay is relative, but it’s not going to cause the same specificity issue as doing #section-id > * (because :where() uses zero specificity)
ie if the user has already chosen to change the position (whether they’ve used a class or ID) they can do so without issue, it’s not going to override it.
8 Likes
Sounds great David,
Thanks so much for the suggestion! 
Can you guys remove or re-egineer this? It’s messing up sites where it shouldn’t and the only answer seems to be that this is easier for the mjority of the users who dont know css? I got couple of messed up sites just because this unnecessary css has been added while the components have been built using the best css practices; I don’t want to wonder if 5 updates later I wouldn’t need to redo the whole sites due to such unnecessary and unexpected additions.
5 Likes
Hi Petya,
It’s already on the to-do list and will be fixed as soon as possible.
Thank you guys so much!
DUPLICATE: Showing different from backend & front - Bugs - Bricks Community Forum (bricksbuilder.io)
after upgrade 1.6 I have this issue. 1.5 is everything fine.
today I upgrade to 1.6.1 still have same problem.
Hi guys,
We’ve fixed this bug in Bricks 1.6.1, now available as a one-click update within your WordPress Dashboard.
Please let us know if you are still experiencing issues.
@bboyfan Have you regenerated your styles, cleared the cache etc?
Best regards,
timmse
@timmse
I have try 1.6.1 before post this comment. same problem. backend and front showing different.
my site i s1.6.1 now, you could see that problem.
