[Resolved] Container top space on mobile

[Taner]

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

[David]

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.

[Taner]

Perfect thank you, David!

[David]

You’re welcome

[Author]

Posts