I have a situation where I need the background color of the rows to be full width, but the content inside to have a specified width. So for example, I want a the row to be width 100% with a background color of blue, so I set that color in the options of the row inside of page builder. However, I need the widgets inside of that row to have a container that restricts their width based on some media queries.
I’m using bootstrap, so basically I need to be able to put a .container between the row and the columns, so that I can have the row be full width and colored, but the widgets won’t even go beyond the width of the container. If I put a container class on the row, it won’t work because then the background color will be constrained to that width as well.
So either I need a way to add an extra div between the row and the columns, or I need a way to apply the background-color that’s set to the page builder row to .panel-grid instead of (or along with) .panel-row-style.
Are either of these things possible? Note, I can’t just add a style that says .panel-grid is blue, because I need my users to be able to change that color through the page builder interface.