[Resolved] Mobile Responsiveness Issues

[Anant]

I have two queries:

1: How do I hide featured image from top of post page only on Mobile. On desktop, I want to stay as it is.
2: In mobile, on homepage, the menu icon shows up on top right. Althoguh there’s no menu which exists so showing that icon is redundant

[David]

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;
    }
}

[Anant]

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.

[Ying]

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?

[Anant]

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.

[David]

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

[Anant]

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.

[Fernando]

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

[Anant]

Hi Fernando,

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

[Fernando]

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

You need to set it to 0 on mobile view.

[Anant]

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.

[Fernando]

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

[Anant]

Shared the link of one such post in priv info.

[Fernando]

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/

[Anant]

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?

[Author]

Posts