How to make all pages have full width with background color + content container

Hi there,

Not 100% sure if I can picture what you are after.

Can you provide an example?

Thnaks.

If you go to example page I posted, you will see log-in and register in grey box.
I would like to enclose that in full width box with red background.

I would like that to be on all pages by default

so container is full width of the page with red background but contents will be in a box of 1260px

Please see private

That's actually kind of difficult (especially for pages that cannot use blocks like the login page) and I'm not sure if it's very attractive.

So basically the body background image wouldn't show through in the content?

Yes...below is what I am trying to achieve

All system pages to have full with ivory background with transparency
Content area to have 1260px width with same background color with same transparency

excatly like how the footer is...full with but content is 1260px

Didn't think this would be hard to achieve.

So you don't want the red background? :)

1. Try add this CSS:

.site-content {
    max-width: 1260px;
    margin-right: auto;
    margin-left: auto;
}
 .page #page.site {
    background: rgba(224,222,215,0.8);
}

2. Remove the background color set for the content in customizer.

3. Using a layout element to set all pages to full width:
https://docs.generatepress.com/article/layout-element-overview/

Thanks but I don't think you are understanding what I am trying to achieve.

I only need to add full with background color to system generated pages to make it look better.
If you look at my site I shared, you will see content area is in the center.
I am trying to extend background full width.

Hi there,

the page you linked to is a static page that Woo simply adds a shortcode to:

https://woocommerce.com/document/woocommerce-pages/

So you can edit that page, set the Content Container to Full Width, and construct it using a GB Container Block. Simply move the shortcode inside that Container.