Sider theme and full width container

Hi Mary,

Remove the "full width" you've added on a container blocks. I believe you're using this - https://share.getcloudapp.com/jkuEK5om - That's the one causing the contents to overflow. Don't use this and just use the full width on GB Container Block setting.

You then modify the width value of this CSS if you wish to change the width ratio between the sider and the content: (found on appearance > Customize > Additional CSS)

@media (min-width: 1000px){
.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 300px;
    z-index: 300;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
    transition: .1s ease;
}
}

And the margin left of this CSS:

	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

Make sure the width and the margin-left are equal. Ideally, percentage values.

Hi Elvin,

Thanks for your reply. I don't see that cylinder icon at my end. If you go back on the home page, I've done the following:
1) For the first GP container (with the green background), I set the full width options like this: https://imgur.com/tJkXAPr
And the content goes behind the sider menu and beyond the right of the page.

2) For the second container (with the white background), I set the full width options like this: https://imgur.com/FYmtPxJ
So the difference is that I set the Inner container to Contained (and it's set to 1200 px).
Now this seems to work better, until I test with a screen resolution between 1000 px to 1500 px wide. Then the content gets squished again and eventually goes behind the sider menu and beyond the right of the page.

Also, under the Page tab, I have the Content Container type set to full width. When I change this setting, it only seems to have an impact on the top and bottom spacing.

Is there something else I should be doing? If option #2 is best, is there a way for me to control the container width so that it works when the resolution is between 1000px to 1500px for all containers that have the inner container set to Contained? Because I'm guessing (maybe?) the issue in that case is that 1200 px wide for the inner container is too wide when the screen width is 1000 px to 1500px?

Thanks again for your help.

Ah that's my bad. It's not the cylinder icon, it's this one i'm pertaining to. - https://share.getcloudapp.com/v1ujDG54

1) For the first GP container (with the green background), I set the full width options like this: https://imgur.com/tJkXAPr
And the content goes behind the sider menu and beyond the right of the page.

Yes that's because you've set the alignment on the icon I've pointed to "full width". It's adding extra width to the element, making it exceed its container.

2) For the second container (with the white background), I set the full width options like this: https://imgur.com/FYmtPxJ
So the difference is that I set the Inner container to Contained (and it’s set to 1200 px).
Now this seems to work better, until I test with a screen resolution between 1000 px to 1500 px wide. Then the content gets squished again and eventually goes behind the sider menu and beyond the right of the page.

There's no need to toggle "Make page full-width" because you already have a Layout element or Layout Metabox doing this. You can toggle this off. You can keep the "full width" for the Container and Inner Container dropdown.

I think all you need to do is remove the "Full-width" set on alignment on the icon I've pointed you to.

And remove the padding on this CSS you have on your site:

	body {
		padding: 0 50px 50px;
		margin-left: 300px;
	}

and change the max-width of this CSS to 100%:

.no-sidebar:not(.archive):not(.blog) .inside-article > *, 
.no-sidebar:not(.archive):not(.blog) #comments,
.no-sidebar:not(.archive):not(.blog) .paging-navigation {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

Hi Elvin,

Thanks so much, this fixed my problem! :)

Nice one. no problem. Glad you finally got it sorted. :D