This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Full width bg, but contained widgets in page builder?

10 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Have a different question or issue?

Start New Thread