Using Bricks Builder, ACF Pro and Automatic CSS. Trying to avoid a PHP or JS script, if possible.
Created an ACF Post Content Type called “Super Card.”
Created a Single template in Bricks Builder to display the fields entered in Super Card. This card is done using CSS Grid.
Created a Section template to display three Super Cards, loading the Single template three times. This layout is achieved using CSS Grid, with the container enclosing them set to Grid, var(–grid-gap), and var(–grid-auto-3).
Created an ACF Page Builder field group that has a Flexible Content field type, with several Layouts located within the Flexible Content. It has three Post Object fields (super_card_1, super_card_2, super_card_3) that allow the end user to select a Super Card page link that will display three selected Super Card post types in the Section template above.
On the Bricks Page Builder template is a Section called Flexible Content, with each Flexible Content layout referenced in a container. Each container has a Shortcode field, which draws on the shortcode generated by Bricks Builder that displays the Section template created to show that particular type.
In the Bricks template that displays the Flexible Content, I am using the shortcode from the Page Builder Super Card. But when I go to the page where the content is displayed, it’s no longer a Grid but a Flex component. I cannot seem to isolate where it is becoming a Flex component.
When I check it in Inspect > Styles, it is the container for the Super Card Section template that is being affected. The .brxe-container is defaulting to Flex, when it should be using the Grid conditions I set above.
Anyone have any ideas? I’ve been tearing out what’s left of my hair over this one. I’ve regenerated CSS. I’ve tried changing it to a UI > LX setup; removing the container in the Super Card Section template; placing it directly into the Flexible Content template and a host of other items. I can’t isolate what is preventing the reset/override to the .brxe-container, keeping it Flex instead of Grid.
I posted this in The Inner Circle forum and no one responded, so I’m trying here. I can provide a login if needed.
It’s hard to imagine all the setup, so I might need login access - will ask if/when needed.
First question would be, if you can create a screenshot, where/how you set this element to be Grid?
I can see that you have brx-grid class (but I don’t see it in the styles), and I also see that you set this to “grid” on the post/template with ID of 656 (I’m not sure which one is this one).
But it’s on the ID level, and here is no ID - so this might be the issue.
So, if you show a bit more of the configuration, I might see the issue (or you can record a video). If I will still not be able to replicate this locally, I’ll ask for login
can you check the website now. Does it look ok?
You will notice that I’ve added bricks-support-grid class, and I’ve set grid styling on it, as previously was set on ID level.
If you can confirm, that this it’s working correctly, then I’ll try to replicate the issue locally.
That looks great - just what I needed. My issue now is that I have a container holding a shortcode that calls a container. And converting the interior container to a block or div breaks the design.
My solution: I tried moving the shortcode outside the container and it works properly, but now I’ve lost the grouping of the shortcode and divider controlled by just one Condition.
I can set Conditions on each shortcode and divider separately, but it just seems counterintuitive. Is there a way to achieve that? Because I have other elements on my Page Builder template that use the same shortcode process (that I haven’t begun to build yet), and if this what I have to do, it will save a lot of heartache down the road.
The design breaks. It puts the three cards into one cell, and the divider into a second cell (like it had reverted to Flex - but I didn’t think to check). And changing it back didn’t fix it, either. Only Undo worked.
Would it be possible to record a video (step by step, with voice), how to reproduce this? So then I can log in to your website, try to reproduce it, and see if I can reproduce it also locally.
thank you for video. Now I see it.
I’ve logged in and checked what is happening. I put the shortcode back inside the container, and yeah, I can see that it does not look right.
But, it’s because the container (Super Cards) has display:grid enabled. If you disable it, then you will see that the cards will be one next to another.
I had actually put your .bricks-support-grid class on that container, and that was what was causing the problem. I guess we can mark this as solved. Thank you for your help!
