Home>Support>Make background color in Row stretch entire page… Pagebuilder

Make background color in Row stretch entire page… Pagebuilder

Hello,

Your plugins are revolutionary. They really are. For Page-builder, I have a 3 column layout and I have one column Purple, One black, one red. How can I force all of the columns to display the colors from top to bottom of the page. Currently they are only filling the space that the content fills. But I want three columns of equal height, that do not rely on pre-filled content to fill the background color. I would like a purple, black and red set of three columns that take on the height of the longest column, thus filling in all the background colors at an equal height… equivalent to the longest column on the page. I’d show you but I’m working on a localhost installation. Thanks! Equal height across the page for all 3 columns.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 3 months ago Alex S
    Hi, I Work Here

    Hi Chris,

    To accomplish the column setup you’re looking to do, please open the row housing the columns you’re referring. Head over to the styles sidebar and open the Row Styles Layout settings group. Set the Cell Vertical Alignment to Stretch – this will stretch all rows to be the same size as the largest row. Then please select the first column on the left and head back over to the styles sidebar and find the now visible Cell 1 Styles section. Open the Design settings group and set the desired column color. Repeat this process for each column,

    As for the height, please head back to the Row Styles settings group and open the Attribute settings. Set the row class to extend-full_screen and then save the page.

    Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:

    .extend-full_screen .panel-cell-style {
    	min-height: 98vh;
    }
    

    How does that look? (you may need to adjust this amount slightly as it may be slightly larger than desired)
    You might also need to install the SiteOrigin CSS Editor.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More