SOLVED: Broken layout on the front

Bricks Version: 1.4 RC2 & 1.4
Browser: Firefox, Brave
OS: Windows
URL: adn.wstudio.dev

Hi everyone, sorry to bother you with what is probably a beginner question but I’m pulling my hair out.
I worked on this website yesterday. Was working fine - layout-wise, builder and front-end was matching. Perfect.

Today, I log in, and it’s all broken on the frontend, (not in the builder).
No cache (no plugin, no cache at the server level, no Cloudflare cache)
I just can’t figure out what is happening.
The class .visually-hidden for example, while working in the builder seems to not have the CSS applied on the front.
Images appear full size - other stylings are not reflected…

I was on 1.4 RC2 - updated to see if it could magically solve this but it didn’t…
If anyone has an idea, I would be very grateful for any insight!
thanks a lot!
Jo

Hey @joa

Ah just read again and see the differences haha, please ignore the below

There is never any need to apologise for posting potential bugs on this forum!

I have had a look at the video and your website but I am struggling to understand a little. You want the h2 heading to not show is that correct?

You entered a class name .visually-hidden what CSS rules have you set with it? As I noticed there was no CSS in the element but you could have set this globally?

Where have you set the display: none property as this is also missing as it usually shows an indicator in the structure panel.

Thanks Michael, yeah I should have made the post clearer.

.visually-hidden is just an example among others (as you saw)
The CSS by the way is
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
} I do it like that for accessibility purpose (and proper html structure)

1 Like

Hi Jo, Sorry I need to apologise, I read too quickly haha.

I see you are using ACSS, unfortunately, I am not familiar with this plugin but I imagine this is causing the conflict with a possible change made between 1.4RC2 and 1.4 Stable (Again this is just a guess, as not sure how often it is updated or if they have full compatibility with Bricks yet).

There were 3 or 4 bugs reported in 1.4RC2 such as the one below:

And ACSS heavily uses these functions.

I am sure @timmse will be along shortly to help though :slight_smile:

p.s. the site looks very :star_struck: great work!

1 Like

If it looks fine in the builder, I would give a force save a try if you haven’t.

CMD/CTRL+SHIFT+S

Tried, not working… but thanks for the idea!

Hi @joa,
the reason of the problem are the broken variables (or generally brackets in the input fields), which is why I advised against using them in RC2 :wink:

Here is an example, which makes everything look like cabbage:
padding-top: var(var(--space-m);

The easiest way to find the errors is to use the W3C validator. Example home page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fadn.wstudio.dev%2F

There you will see the line numbers where there are problems. Open the page source of the corresponding page, scroll to the line and you know where the problem is. Alternatively you can search element by element in the builder for the double var(var(…). This also applies to Theme Styles.

Sorry for the trouble,
Best regards,
timmse

Aaaaa thanks a lot! I stopped using them after your advice but there was already a few in places :grin:
That’s weird that it worked for a while and then broke but thanks a lot for finding out!

Maybe you used 1.4RC1 and then updated to RC2, so the values were overwritten when saving some pages. I’m sorry that the bug crept into RC2… but better there than in the stable version :slight_smile:

Hey @timmse

Just out of interest in relation to your last comment.

If I created a site in 1.4b and used clamp variables, and then updated it to 1.4RC2 do they become corrupted or If I add any new ones in 1.4RC2 that the new ones become corrupted but the ones from 1.4b are ok?

Thanks

If you update from 1.4beta or RC1 to stable there should be no problems. The problem only occurred in RC2 because the duplicate var( was written to the database when saving.

1 Like