Mobile Responsiveness Issues

Hi there,

1. go to Appearance > Elements ( or via the Admin Bar > Elements menu when viewing a single post ) and edit the element titled: Post page hero

Select the Image Block, and go to Advanced > Additional CSS Class(es) and add: hide-on-mobile

2. Add this CSS to your site:

@media (max-width: 768px) {
    .main-navigation .menu-toggle {
        display: none;
    }
}

Hi David,

The 2nd issue is fixed. Thank You.

For the 1st, it will hide the image for both desktop and mobile. I want to hide it only for mobile.

Hi there,

David's solution for your 1st is correct, it's to hide the block only for mobile.

Can you give it a try?

Hi Ying,

I completely missed the 2nd line mentioned by David for my 1st query.

I just implemented that. The features image does not show on top on mobile now but it leaves blank white space there now. I have shared the post url in private info for you to check.

Select the Container Block that the image was in, and switch to Mobile View, in Spacing set the Min Height to 0

I tried to do that but still the huge portion remains empty on post pages.
After selecting image block, I set 0 under padding & margin within spacing section. I've shared the screenshot of same in priv info.

Hi Anant,

The min-height setting is still there. You'll need to remove that for mobile.

Can you share admin login credentials? I'll take a screenshot of the setting you need to alter.

Please use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hi Fernando,

I have shared the credentislas in private info. Please do the needful and guide me on the process.

Thank you! Here's a screenshot: https://share.getcloudapp.com/7KujNl1y

You need to set it to 0 on mobile view.

Thank You, this is done.

I also had another query, since you've the access I think its best to get addressed here only.

While writing posts, when I add multiple new lines between subsequent paragraphs or between an image and a paragraph, only 1 new line difference shows up when the post/page is published.

I want to use multiple line gaps between subsequent sections to keep it clear for the reader. Right now no matter how many enters/new lines you hit, the gap remains of 1 only. Hope I was able to make it clear.

Can you provide a link to a post on your site where you've tried to implement this?

Shared the link of one such post in priv info.

I see.

There are three things you can do.

1. Add this CSS through Appearance > Customize > Additional CSS:

.single-post .entry-content p {
    margin-bottom: 3em
}

This increases the bottom margin of all single post paragraphs.

2. Add an HTML Block, and add this code:

<br><br>

3. Add a Spacer Block. Reference: https://developer.wordpress.org/block-editor/reference-guides/components/spacer/

The 2nd and 3rd option look good methods.

One doubt I had regarding the 3rd option, does using spacing blocks affect seo of website in any negative manner?