- This topic has 9 replies, 4 voices, and was last updated 5 months, 2 weeks ago by Ying.
October 2, 2022 at 4:45 am #2360348jm1991
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 moduleOctober 2, 2022 at 11:17 am #2360765LeoStaffCustomer Support
The home page is using the full width content container setting:
Let me know if this helps 🙂
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2022 at 2:10 pm #2360873jm1991
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.October 2, 2022 at 5:54 pm #2360942Fernando Customer Support
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?October 2, 2022 at 11:00 pm #2361089jm1991
The first screenshot is the settings container module on the homepage:
The below second screenshot is the settings container module on the “About” page:
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!October 2, 2022 at 11:36 pm #2361108Fernando Customer Support
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/Jru8GRNgOctober 3, 2022 at 2:47 am #2361261jm1991
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?October 3, 2022 at 10:55 am #2361833YingStaffCustomer Support
If a page/post’s content container is set to
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) 🙂October 3, 2022 at 1:42 pm #2361978jm1991
Just to clarify, your recommendation is manually set up padding and set containers to full width, except for the more dynamic pages like /blog?October 3, 2022 at 8:59 pm #2362180YingStaffCustomer Support
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.
- You must be logged in to reply to this topic.