Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi there,
I was checking up the alternative CSS method to get things go full width, as described here:
I am using GeneratePress however, not Corp, so I have checked the Corp theme to see the use it makes of the container CSS classes mentioned in your doc.
I thought I could make it work by using GP’s .one-container .grid-container classes.
one-container is applied to the body and it’s Full Width
grid-container contains the website content and it’s limited (in my case) to 1470px
So this is what I put in my functions.php
add_filter( 'siteorigin_panels_theme_container_width', function( $container ) {
return '1470px';
} );
add_filter( 'siteorigin_panels_theme_container_selector', function( $selector ) {
return '.one-container .grid-container';
} );However, nothing happens…
I’ve even went further by reading the page builder code but I can’t find out what to do.
Can you please explain how this method should be used?
Hi, good to hear from you.
I’ve tested a page without sidebars and used the selector:
You’d need to add to Custom CSS:
.siteorigin-panels-css-container .separate-containers .inside-article { padding-right: 0; padding-left: 0; }The page must contain a full-width or full-width stretched row for the above to apply.
Rather use:
.site.grid-containerTo avoid impacting the header.
For the CSS tidying up, rather use:
.siteorigin-panels-css-container.separate-containers .inside-article { padding-right: 0; padding-left: 0; }Hi Andrew,
Thanks for the quick answer.
I managed to see some changes with a slightly different CSS, maybe because I’m in “one-container” GP mode.
However, I have to set the row to Full Width mode to see some changes: i can see the background stretching beyond container width.
The container appears to have these rules applied by the pagebuilder:
.site.grid-container { max-width: none; padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; }Plus, the “so-panels-full-wrapper” div appears, wrapping the content of the stretched row thus limiting it to the theme_container_width set via the proper filter.
In Full Width Stretched mode, however, just nothing happens… no css rules appear, neither “so-panels-full-wrapper”…
Same applies to the Full Width Stretched with Padding mode, I can only see the siteorigin-panels-css-container class applied to the body.
Thanks for the update. I’ll try to replicate your setup. Is one container a page setting that’s different to no sidebar?
It’s a layout option in GP.
You can find it in Appearence > Customizer > Layout > Container > Container Layout
This can be: 1) Separate containers 2) One container
I think it basically removes some padding around GP structural elements
Thanks. Please, try saving your work separately and try the following. For the functions, please, try:
add_filter( 'siteorigin_panels_theme_container_width', function( $container ) { return '1200px'; } ); add_filter( 'siteorigin_panels_theme_container_selector', function( $selector ) { return '.site.grid-container'; } );For testing purposes only adjust the 1200px value to the width you’ve chosen in the Customizer.
Save your Custom CSS separately and for testing, please, try:
.siteorigin-panels-css-container.separate-containers .inside-article { padding-right: 0; padding-left: 0; }Using One Container, this is the end result for me: https://imgur.com/a/zNFGWwE. The Row Layout settings are in order:
Standard
Full Width
Full Width Stretched
Full Width Padded
Hi,
Just to let you know that finally I’ve been able to use this method.
However, sometimes removing padding to containers/wrappers can lead to unwanted behaviors at lower widths, so I’ve managed to overcome possible issues by applying negative margins (equal to the containers padding) to .siteorigin-panels-stretch.
F.eg like so:
body.siteorigin-panels-css-container .siteorigin-panels-stretch { margin-left: -40px; margin-right: -40px; }Obviously, you have to fine-tune the corresponding CSS rules every time, however I guess the CSS method can provide better results in Core Web Vitals.
Thanks for the update. I’m glad to hear you’re making progress :)
We initially added CSS full-width containers as a setting but due to the extra styling required, we decided to leave the filters as an advanced customization for the time being.
When testing with the SiteOrigin North theme we added the following to help overall styling:
body.siteorigin-panels-css-container .entry-header, body.siteorigin-panels-css-container .entry-content footer.entry-footer, body.siteorigin-panels-css-container .sharedaddy, body.siteorigin-panels-css-container #jp-relatedposts.jp-relatedposts, body.siteorigin-panels-css-container .site-main .post-navigation { max-width: 1040px; margin: 0 auto; }Hopefully, the additional CSS classes added when CSS full-width rows are in effect allow enough flexibility.
The original pull-request and conversation for this feature can be found at https://github.com/siteorigin/siteorigin-panels/pull/911.
Chat soon, cheers.