Apply Grid to Bricks Builder using Microthemer to both the editor and frontend

This topic contains 5 replies, has 3 voices, and was last updated by  stephen Jeffers 8 months, 1 week ago.

Author Posts

Sebastian

Hello Sebastian

Would it be possible to help with 2 queries if possible? I can post a separate question for the question query.

I can use Microthemer a grid in Bricks builder no problem but this doesn’t reflect in the editor.

The problem I think is that I need to target both the front end and editor selectors at the same time.

The selector seems to be following.

“all containers are wrapped in an additional div, which has a class named .bricks-container-inner.”

The answer has been given below in the link. Would it be possible to create a little video here or on your youtube channel on how to achieve this?

https://forum.bricksbuilder.io/t/css-grid-does-not-display-correctly-in-the-editor-but-works-in-the-frontend/992

It’ll not only solve the problem for many bricks users but can be used to promote Microthemer at the same time.

Many thanks


Sebastian

Here’s an example from Bricks.

.bricks-is-frontend .grid-container,
.grid-container > .bricks-container-inner {
display: grid;
grid-template-columns: repeat(4, minmax(20%, 1fr));
/* … */
}

/* Reset other .bricks-container-inner inside .grid-container > .bricks-container-inner in the builder */
.grid-container > .bricks-container-inner > .bricks-container-inner {
display: inherit;
}


Sebastian

Hey,

Sure, I’m happy to make a video explaining the best way to achieve this. I’ve contacted the author of Bricks to check what his long term plans are for addressing this kind of situation, if any. Ideally, the DOM structure would be more consistent between the front and back, but there may be technical reasons why the current system needs to remain in place.

Cheers,
Sebastian


stephen Jeffers

Hello Sebastian

I’m happy to go by what you decide and what’s best in terms of best practices. Even if you feel that creating a video is not the best thing to do. I’m still fairly new to CSS so if there’s a better option, perfect. I value your opinion above all.

Cheers
Stephen


Sebastian

Hey Stephen,

Microthemer version 7.1.1.0 now has a workaround for making grids display when editing with Bricks.

If you update the targeting for your grid container, using the “Retarget selector” icon in the top toolbar, you should see it display on the backend too (after refreshing Bricks).

I will have a video explaining this method and the general Microthemer-Bricks workflow early next week.

Cheers,
Sebastian


stephen Jeffers

Hello Sebastian

Thank you as always. You wouldn’t get this service from CCS Hero, so thanks.

Cheers

Stephen

You must login or register to reply to this topic.