Hi - I’m attempting to create a layout like the below image where an image is behind some text.
I am doing this by uploading the image and then playing with the margins and padding for the different responsive views.
The challenge is that I cannot determine/tell Beaver Builder which column needs to go “behind” or “in front” of the other.
When I select a column it seems to use some sort of hidden rule to switch what column is “behind” or “in front”.
Is there an option or setting I am missing?
Do I need to add some CSS for the column?
Please advise.
Thanks
Andy
Actually just solve it I think.
I gave the column with the image a custom CSS class “floating image”
And then added “Layout CSS & Javascript” (found in the top left menu “currently editing page”)
.floatingimage {
z-index: -1;
}
I’m assuming for other images I can make them “z-index: -2;” etc.
Update.
Now I do not have access to the Beaver Builder controls for the column.
Do you guys have another way to do this?
Hi,
Yes, you can disable the CSS rule when in BB Edit mode, by adding this to your CSS selector:
body:not(.fl-builder-edit) .floatingimage {
z-index: -1;
}