[Resolved] Full Width Background using Generate Press Theme

[Author]

Posts

[J S]

I am trying to get a full width background to display using layouts when using the Generate Press theme. For example, I'd like to know how to create a background image, or color that extends the full width of the layout row, if specified.

I've tried to do this following the steps recommended here here: https://toolset.com/documentation/user-guides/learn-how-rows-can-displayed-different-ways/?utm_source=layoutsplugin&utm_campaign=layouts&utm_medium=row-edit&utm_term=help-link

However the background does not want to extend the the edges of the browser. I did have to add some CSS to get Generate Press to work properly with Toolset referenced here: https://toolset.com/forums/topic/problem-with-generatepress-can-not-create-full-width-container/ and here hidden link where Generate Press settings are getting overwritten by Toolset loading the 15px margins from bootstrap automatically and they said to add the following CSS to prevent this.

.container.grid-container {
    padding-left: 0;
    padding-right: 0;
}

I think there is a problem though in that anytime I set the row to full width and then add a colored background, the background does not extend to the full width of the row, it stays within the container for the page. Exactly what CSS is needed to create a full width row in Layouts, that will extend the the full width of the browser when using the Generate Press theme? Please include the exact CSS to add in and the tags to add to the row, with an example for a colored background and a background image.

[J S]

Adding a screenshot of the row settings...as recommened for Generate Press I think.

[Nigel]

The Template Layout can occupy as much space as the theme allocates to the content area (and that includes any background styling), so the first step is to make sure the theme settings (set in the theme options for that Layout) are full-width.

At the highest level that creates a full-width wrapper div with classes of .grid-container and .container. As you have noted, there is a clash with the Bootstrap styles for container, which sets padding of 15px on either side.

So you will need custom CSS that overrules that.

When you edit the Layout row settings, as shown in your own screenshot, you can also add a custom class to the row to enable you to target it for styling, e.g. you might add a class such as custom-background and can then style it like so:

// remove container padding coming from Bootstrap
.grid-container.container {
  padding-left: 0;
  padding-right: 0;
}

// style target row
.custom-background {
  background-color: #f0f;
}

You might also want to use the last option, where your content is restricted to the container width but the background extends the full width.