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

Tagged: , ,

Author Posts

Sebastian December 18, 2021 at 9:50 am

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 December 18, 2021 at 9:52 am

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 December 20, 2021 at 4:21 pm

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 December 20, 2021 at 4:41 pm

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 January 21, 2022 at 11:47 am

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 January 21, 2022 at 6:52 pm

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.