NO BUG: Frontend does not render CSS grid, background color, and other settings

[friiitz]

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to the page that illustrates the issue

I have a menu bar for a content section with internal links to the specific container IDs that is sticky when scrolling further down (see link). The content inside is layouted with CSS grid. Before the update to Bricks 1.9.2 it displayed fine on the frontend but after the CSS grid does not anymore. Instead, it turns to a flex container, does not show the background and the links/buttons have a strange hover behaviour.

Settings in the builder

How the builder renders it

How its rendered in the frontent (latest editions of Firefox and Chrome)

Frontend HTML output

When I overwrite the builder settings with custom CSS in the menu container element in the builder, it gets rendered correctly in the frontend (I changed the background color to red just for testing).

Does anyone know what the problem is? Is it a bug or am I doing something incorrectly?

[charaf]

Hi @friiitz,

Yeah, this is odd. If you already tried regenerating the CSS, then could you please share temporary admin access to help@bricksbuilder.io with a link to this forum thread using the same email address you used to purchase Bricks?

[friiitz]

@charaf I sent an email as requested.

[charaf]

Hi @friiitz,

This was a tough find, but the issue was… : an extra semicolon

The taxonomy element has this class .product-info__category-item which in turn has this custom CSS with an extra semicolon:

Removing that now renders the rest of your page correctly (including the menu bar):

I hope that helps

[friiitz]

@charaf You’re THE MAN! Thank you so much and sorry for having caused such an elaborate mistake in the code

[charaf]

No worries, happens to the best of us