[Support request] How to set inner container width of posts while keeping background full width?

[Kumar]

Hi there,

Currently, we are using block editor with generateblock containers and our website is full width, but only for posts, we want the inner container width to be set to 720px. We are currently using the following css:

.single-post.no-sidebar #main {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}

But this sets the entire page width to 720, and not just the ‘inner container’ width. Could you please advise how to achieve this? (We also tried creating a layout in elements and set the content width there to 720, but this modifies the whole width of the page including background too, not just the inner container width).

[David]

Hi there,

you would need to set the Single Post layout to Full Width and then use the GB Container Blocks to set the inner content width.

Then a little CSS to contain the entry header and the comments area:

.single-post .entry-header,
.single-post .comments-area {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

[Kumar]

Hi David,
Thanks for your reply. I have already done exactly as you have said for the first part. Set the single post layout to Full Width and want to use the container blocks for the inner content width. Is there a way to globally set the inner container width for all the posts to be 720px?

Right now, the global for container width is set as 1080px (in customizer–> container), but if I modify it there, then the layout of my home, pages and archives also gets modified. I would like to set this 720px inner container as default for all posts, rather than changing it manually for every post. Can this be done?

Also, the css that you provided works like a charm for desktop, but the titles are still full-width on mobile. Please advice.

Thanks
Kumar

[David]

Try this CSS:

.single-post .gb-container> .gb-inside-container {
    max-width: 720px;
}

[Kumar]

Hi David,

That works perfect! thank you!

Just have the full-width title issue on Mobile remaining.

Desktop looks mostly okay, but the title is slightly to the left, even though I have specified the same width for inner container and the title (720px). What could be causing this? I’m attaching an example.

Also, I noticed that the author bio box at the bottom is still full width. I am using simple author bio plug-in. Is there a way to limit the width of the author bio box too?

Thanks so much for you timely help.
Kumar

[David]

In this CSS you need to include some right padding:

.entry-header {
    padding-top: 60px;
    padding-left: 40px;
    padding-right: 40px;
}

Author Box you can include the saboxplugin-wrap in your containing CSS eg.

.single-post .entry-header,
.single-post .comments-area. 
.saboxplugin-wrap {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

[Kumar]

Thank you for your reply. Both worked great and are fixed.

We also have amazon native ads enabled as a hook, which is also displaying full-width. Would you happen to know how I can limit the width of this too please?

Kind Regards
Kumar

[David]

If you right click and inspect the advert – and look for its outer container you just need one of the class="css-classes" attributes included in your code.

[Kumar]

Hi David,

Many thanks for your help on this. Please see below in the private box below, could advise the code I need to use bring inline with the rest of the posts?

Many thanks
Kumar

[David]

Tricky one…
How are they being added ?

Could you wrap them in your own <div> eg.

<div class="amz-wrapper">
<!-- Amazon code here -->
</div>

Then you can add .amz-wrapper to the list of selectors in the CSS

[Kumar]

Hi David,

That did the trick. 🙂 Thanks a lot!

Best
Kumar

[David]

You’re welcome

[Warren]

Hi there, I don’t want to hijack the post, but it also concerns setting the width of an inner container. From what I can see, it is only possible to set the width of the outer container (full-width or contained, in which case you’d set the width in px).

I’d like to set the width of one of the inner containers but can’t see a place to do it?

Any assistance would be appreciated.

[Ying]

I’d like to set the width of one of the inner containers but can’t see a place to do it?

Each container block only has 1 inner container, what do you mean by one of the inner containers?
Let me know 🙂

[Author]

Posts