Removing blank space between footer and main section on mobile.

I posted this before, but the problem wasn't actually resolved. My bad.

So, again: there is an extra blank space between the main section of my mobile home page and the footer. I do not wish to lengthen the main section to fix this issue. I simply need the space gone, even if it requires code.

This issue strangely doesn't show up on all mobile devices - on my phone, the home page looks normal and the space isn't there. On my friend's phone, the blank space shows up. So I want it gone just for good measure.

I DO NOT WANT TO SET THE MAIN SECTION TO "LARGE"  as a fix. This renders the section too long and creates too much extra space on mobile. All the other pages on my site are set to medium or have custom heights and the footer looks normal on them. It is JUST the mobile home page giving me a hard time with the extra space above the footer.

Site: https://www.sybfire.com 

Password: 12345

Thanks.

On 5/11/2023 at 3:12 AM, Ziggy said:

Since the first solution didn't work for you, you can try this Custom CSS:

@media only screen and (max-width:767px) { 
  [data-section-id="6459cecd865d3f4fa07f132e"] {
    min-height:unset;    
    height: 85vh;
  }
}

Let me know if that works for you.

It fixes the problem to my satisfaction, thank you so much.

1 hour ago, bavickers said:

I have a sort of related issue & have tried the above, replacing the section IDs with mine. 

 

Can you share your website URL and the code you have tried using?

The gap is because the content is not tall enough on mobile.

Hi Ziggy,

I actually noticed that I had a different code in there - I just saw your solution above which for some reason I hadn't seen before - it solved the issue well on my phone (iPhone XR) but not on full-size iPad.  Is there a modification to fix that perhaps?

URL is www.benjaminarmstrong.net

Code I have there now is the same as the above solution (I'm sorry I hadn't seen this before; I must have tried a different way and gotten it all mixed up):

@media only screen and (max-width:767px) { 
  [data-section-id="6459cecd865d3f4fa07f132e"] {
    min-height:unset;    
    height: 85vh;
  }
}

Could it be the max width?

The section height of your page section is simply too short, change the setting from M to L or a value that works.

Ok thank you Ziggy - that works for now! Solved it. Many many thanks