Archived topic
Container top space on mobile
3 replies · Started by Taner on November 16, 2022
Hi,
I wonder if you can help me with some empty space that appears just above the main content area only on mobile view.
I have created a 10-second video linked below that shows the site pages in desktop view without any spacing and on the same page, in mobile view, the space just appears.
Linke to Video: https://www.loom.com/share/dd60f811e5124f279f4bb7423fd34f9e
I've tried adding the following CSS and changing the inside article top padding to 0px for mobile but this doesn't work.
@media (max-width: 768px)
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
padding: 0px 30px 60px 30px;
}
Website address: https://staging-spindle-point-boltonschools-net.stackstaging.com/
Any help would be appreciated.
Thank
Taner
Hi there,
if you go to Customizer > Layout > Container, switch to Mobile preview and then remove the Top Padding, does that resolve the issue ?
As a general rule, when building layout that are full width, you can set the Content Container to Full Width:
https://docs.generatepress.com/article/content-container/
This will remove any Theme Padding, and all content will be 100% wide.
You can then use GB Container Blocks to define the necessary section widths and add the padding where necessary.
Perfect thank you, David!
You're welcome
