[Resolved] white space under single post page [only on mobile]

[liz]

Hi,

There is a white space at the bottom of the single post page [only on mobile] which I can’t delete. Thanks.

[Elvin]

Hi Liza,

There are 2 things that adds the space.

First is the Post navigation added through a Block element. The container block that contains the navigation buttons has a margin bottom for the desktop view that also is being cascaded to mobile. Make sure to remove this margin-bottom on mobile view.

The second one is the empty sidebars. I see you have them enabled on single post pages but they’re empty. You can completely remove this from render by creating a Layout Element.
https://docs.generatepress.com/article/layout-element-overview/

On the newly created layout element, go to its sidebar tab – https://docs.generatepress.com/article/layout-element-overview/#sidebar – and set it to Content (no sidebars).

You then set the display rule location to “Posts – All posts” and save the layout element. This should effectively remove the 2nd half of the white space

[liz]

Hi,

Thanks..I managed to remove the 2nd half of the white space but not the space on top of it. I don’t know exactly where to edit it. I tried to remove the margin-bottom in the post navigation block section but there seems to be no option to do so…thanks in advance!

[Elvin]

Ah it may not be assigned there.

Your site has this CSS:

.sidebar .widget, .page-header, .widget-area .main-navigation, .site-main>* {
    margin-bottom: 51px;
}

It seems like a custom CSS but I can’t verify where its added as it is masked by autoptimize.

Once you find it, modify it to this:

.sidebar .widget, .page-header, .widget-area .main-navigation, .site-main>*:not(.featured-navigation) {
    margin-bottom: 51px;
}

You may also have to remove the empty Paragraph block on the Block element responsible for the Post navigation.

Go to Appearance > Elements and look for the Block element for Post navigation.

Open the Block element and check the page using List view.

You should see a paragraph block. Delete it to remove the extra space it adds.

[liz]

Hi Vin,

I could not find it either..it’s nowhere to be found. Could it be that it’s lurking in the theme editor ;=) Concerning the paragraph block–I did check the page using the list view but there is no option to remove it…TIA

[David]

Hi there,

you need to select the Text block in the editor and then hit Backspace Delete to remove it

[liz]

Hi,

I remove it using the backspace key but the white space is still visible both on mobile and desktop. Thanks

[Ying]

Hi Lisa,

It seems you have 55px bottom margin applied on the site container.
https://www.screencast.com/t/R8G74Sdx9G

Can you disable your cache plugin so I can see where the CSS is coming from?

Let me know 🙂

[liz]

Hi,

I already disabled the cache plugin…

[David]

If you want NO space at the bottom of the post ie. below the Next / Previous post section then add this CSS to remove that just on the single post:

.single-post.separate-containers .site-main {
    margin-bottom: 0;
}

[liz]

Thanks, David!

[David]

You’re welcome

[Author]

Posts