SOLVED: Custom classes not displaying on front end

Bricks Version: 1.3.5
Browser: Edge
OS: Windows 10
URL: Test – My Blog

-Created 4 cards in a container
-added padding styles to a new class called .p-4 to each card. (used tailwind values of 1 rem)
-looks correct in the builder
-styles not coming across in font-end.
-attached image will help demonstrate the issue

Hi John,
welcome to the forum!

First please remove the padding settings on your container IDs. There are some empty rem values (strangely enough on the .p-4 class too).

p-4

It looks like that you’ve set the .p4.bricks-container somewhere else too, because the entry is doubled… please check that too. If I rebuild your layout, i sadly cannot reproduce the issue.

Best regards,
timmse

I deleted the top-level container and the issue was resolved! image

What gave me a bit of trouble was the style in the builder looked correct, but the style on the front end did not.

I have tried for some time now to re-create whatever I had done and cannot.
Which is a good thing.

Thank you,

John

You’re welcome, I’m glad you get this solved.
Yeah, sometimes you loose track on what you’re doing / what you have done on classes, IDs etc…

But luckily there is a new Idea on the Idea Board that solves at least unintentional editing of classes:
The Class lock.

Leave an upvote if you like the idea.

Best regards,
timmse

Hello,

I recorded a loom to try and demonstrate some inherited CSS styles from parent containers and to get a little bit of guidance. I am still having a bit of trouble viewing a preview of the page vs the front end. I suppose my biggest question is why elements render differently in the preview than on the front end?

Edit - I was thinking a bit more about this topic and I expected that when styling the ID directly, it would override the inheritance of the container wrapper.

I am pretty new to the builder, so please let me know if this is a user error.

Thanks for the help!

Cheers,

John