I cant get full width (edge to edge)

Hi, thanks for getting in touch.

Perhaps try the following at Appearance > Custom CSS if you’re using SiteOrigin CSS or Customize > Additional CSS:

body.siteorigin-panels {
margin-right: 0;
margin-left:0;
}

Hi Andrew.

Thank you very much. Thats works perfectly. I am very greatfull for your help.

It seems that the site is a big wider on mobile than the screen. Can you point me in a good direction how to fix that too? ??

Kr Kim

Glad to hear you’re making progress.

I’m not quite sure of the overflow cause. You can try creating a test page and from within Page Builder, click Layouts > Clone: Pages. Clone your home page and then start deleting sections. Try to find a working baseline.

Hi Andrew.

Thank you for your advice. I didnt even know there was such feature. Very nice.

So, when I add your CSS from above, I get full width, but menu and footer, and text are all the way to the edge, and on posts its also text and heading, it seem its mostly a problem on mobile. I tried to get it rigth, but im just chasing my own tail.

Here is my attemt:

.site-header {
margin-bottom: 0px;
margin-left: 15px;
margin-right: 15px;
}

.site-branding {
margin-bottom: -20px;
margin-top: -20px;
}

pgc-2-0-0.panel-grid-cell {

padding-top: 0px;
margin-top: -60px;
}
body.siteorigin-panels {margin-right: 0;margin-left:0;

}
.site-footer {
margin-top: -80px;
margin-left: 10px;
margin-right: 10px;
}

(the css is not inserted on the live page. And I use google and trial and error to find out how to do it ?? )

i seem that the probelm lies in even i choose full width on the page itself, and in the layout setting of the pagebuilder row, it doesnt happen.

I created a test page, and when I use the blok editor, there is no problem chosing full width.

https://www.udviklingsterapi.dk/test/

It would be so great if I could get the “rows” working so I could choose full widt or not.

Kr Kim

Hi Kim

Thanks for your feedback.

The theme uses body class padding, which negatively impacts how Page Builder handles full-width rows.

The Block Editor settings are working because the author has written CSS to accommodate those.

The following is working for me with the free version of your theme:

body.siteorigin-panels.page-template-fullwidth {
margin-right: 0 !important;
margin-left:0 !important;
}

body.siteorigin-panels .site-header {
margin-right: 40px;
margin-left: 40px;
}

body.siteorigin-panels .footer-widget-area,
body.siteorigin-panels .site-bottom {
padding-right: 40px;
padding-left: 40px;
}

If there is an issue with full-width rows working with the above, please, try clearing and then temporarily deactivating your caching/optimization plugin.

Thanks

Hi, a quick follow-up. Have you made progress on this one?

Thanks

Andrew

Hi Andrew. Yes, thank you. I made some progress. Now there is two things left.

1. The margins og the full width is quite nice, but when reading a blog post, is seems the margin is “double” and the top menu is squeezed more to the center, than when wieving the normal pages.

2. And this is the most important. I have some really heavy shift in layout when the page is loading, and its quite bad. I tried a lot of things, but I cant really get rid of it. I really would hate to get rid of the pagebuilder, because I really enjoy working with it.

Du you have some clever advises?

Kr Kim

Hi, thanks for your feedback.

1. Is the issue described in point one currently visible?

2. Changing Page Builder from JavaScript to CSS full-width containers is possible. More information is available here https://siteorigin.com/page-builder/advanced-customizations/#heading-full-width-containers-using-css. It’s a semi-technical task.

1. yes, the problem is on mobile, reading blog posts
2. I will have a go on that, and see if I can get any succes

Thanks for the feedback.

Please, find a screenshot from Safari linked below. Any further feedback regarding the mobile issue would be helpful.

https://siteorigin.com/wp-content/uploads/2023/01/safari-view.png

If you’d like to go the CSS full-width containers route using the Code Snippets plugin as outlined in the documentation, please, find filters for your theme below, prepared by Alex here at SiteOrigin:

add_filter( 'siteorigin_panels_theme_container_width', function( $container ) {
return '1120px';
} );

add_filter( 'siteorigin_panels_theme_container_selector', function( $selector ) {
return '.site-content';
} );

It’s likely that a few small CSS adjustments will need to be made, which is why this option isn’t currently a Page Builder setting.

Thanks again.