[Support request] Container Width Issue

[jm1991]

Hello!

I can’t for the life of me figure out this container issue on mobile that I’m coming across.

You’ll see on the homepage link I provided a module with the text that contains “Hello there!”. On mobile, you can see that the container is full width. There is no padding on either side.

However, on the second link provided padding still exists on the equivalent module, despite me trying to customise said module to be the same as the homepage module

[Leo]

Hi there,

The home page is using the full width content container setting:
https://docs.generatepress.com/article/content-container/

Let me know if this helps 🙂

[jm1991]

Hi Leo,

Thanks for responding!

So the homepage module container wasn’t set to Full Width, at least within my settings. I have now changed it to full width; you can see the difference in how the container looks on the homepage.

Even though full width has been selected on the module found on the “About” page (it is a reusable block, however), it still doesn’t expand to full width and I’ve had this issue since yesterday. I’ve purged my cache numerous times, but that container doesn’t seem to update.

I actually like the design of the container on the “About” page on desktop with the white space on either side, but it seems like I can’t add a background colour to a grid. If I try to add a background colour to the container within the grid, the section just above and below the image is different, so going full width is something I might have to go along with.

However, I can let that slide… I just don’t know why the container on the “About” page isn’t replicating the homepage equivalent now.

[Fernando]

Hello there,

From my end, they look the same, and have the same Container Width.

Can you take a screenshot of what it looks like from your end?

Can you temporarily add the Background color as well, and we’ll see what’s occurring?

[jm1991]

Hi Fernando,

The first screenshot is the settings container module on the homepage:

https://i.postimg.cc/x8kCqj0L/Homepage.jpg

The below second screenshot is the settings container module on the “About” page:

https://i.postimg.cc/VNCPSSMf/About.jpg

I have now also changed the background colour on the homepage to illustrate what I mean by sections above and below the images not blending in.

I have also submitted links in the private location box that shows how the container looks different on mobile between the two pages, specifically, how the container is wider on mobile on the homepage.

Thanks!

[Fernando]

Let’s remove the padding first on mobile.

To do this, go to Appearance > Customize > Layout > Container, and then remove the left and right padding on mobile. Example: https://share.getcloudapp.com/Jru8GRNg

[jm1991]

Done and purged my cache.

It looks like that’s resolved the “About” page issue; however, it does mean that the universal padding has been removed for other sections on the page.

Does this mean I’ll have to manually adjust padding for each section I create, instead of relying on the universal setting, if I want to avoid this issue?

[Ying]

If a page/post’s content container is set to full width or contain, this will remove the theme paddings.

You will need to manually add paddings for each section.

Or you can wrap all your content into one container and set paddings to the parent container.

But if I were you, I would set the About page or any static pages that built with blocks to full width and keep the paddings in the customizer for index pages like blog (if you don’t have any, then it doesn’t matter) 🙂

[jm1991]

Thanks Ying.

Just to clarify, your recommendation is manually set up padding and set containers to full width, except for the more dynamic pages like /blog?

[Ying]

Sorry if I didn’t make it clear 😛

I would recommend:

1. Keep the paddings set in the customizer, the paddings will apply to blog, archive, and single posts.

2. Set static pages’ content container to full width, as the modern-looking websites are all going for the full width layout nowadays 🙂 And static pages are mainly built with blocks, you can control the paddings of the pages via blocks’ settings.

[Author]

Posts