[Resolved] Custom container width for certain post, element not working

[Tom]

Sitewide, my container width is 877 (one container, boxes).

I have a specific blog post I want to make this width 1200 or so. I have added an element, and set it to display on the given post. I have gone and set content area = default and content width = 1200px under content in the element. However the change never happens, the width stays the same. If I change content area in the element (to full width for instance) this change applies. I’ve tried clearing my site and browser cache. What am I missing here?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Tom]

Sure.

[Leo]

Can you clear and disable your caching plugin first?

Do you have any other layout elements added?

[Tom]

I have tried clearing Autoptimise and WP Fastest Cache, I can’t disable them on a production site. I don’t think it’s that because other layout element changes work fine.

No other layout elements are added on the site.

Could it be that I need to apply the larger container site-wide and then use a layout element to make it smaller on all pages except this one?

UPDATE: the element works fine as long as the site-wide container is wider than the one defined by the element. But then the top menu bar is far too wide. How can I work around this?

[David]

Hi there,

you will need to switch the layouts around.
First set the Customizers container width to the largest width you require.
Then create a Layout Element that defines the smaller size and where you want that applied.
The Layout Element may be for the Entire Site and Exclude just the single page you require the wide width.

[Tom]

As I mentioned above, this causes the top bar/logo padding to be set at the wider container site-wide. The all pages layout element only reduces the size of the content container.

I would like the content container to be wider on a specific page without affecting the size of the logo/top menu container.

[Leo]

Hmm looks like the layout element method only works to make something wider and not narrower – I’ll look into that.

Give this CSS a shot:

body.postid-2735 .site.grid-container {
    max-width: 1200px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Author]

Posts