Jump to content

Home Page Height Fix

Go to solution Solved by tuanphan,

Recommended Posts

This seems to be more tricky than I can manage – 

On my site alinahetz.com I made the home page full screen, fixed page - as in it *shouldn't* scroll up or down. Just sort of be one full screen page. 

It works on desktop and I figured out how to make it that way on iPhone but it doesn't seem to apply to all. My media max-width is set to 767px, changing it to 640px as I also see used a lot does nothing. The page is displayed fixed and full screen on my iPhone 11 Max and on a 14 Pro. On standard iPhone 14 the image or page shows up short - so there's a white area on the bottom.

Instead of me changing vh back and forth - is there a code that would automatically adjust the height of my home page to all mobile screens to sort of fit it exactly and not move around?

I know it's tricky but thanks in advance if anyone knows how to navigate this!

 

Right now the css I have running looks like this:

@media screen and (max-width: 767px) 
{ #feature
  {min-height: 78vh!important}
  }

(*putting 100vh makes the page too tall and it starts to scroll)

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

Use this code. 96px is mobile header height

@media screen and (max-width:767px) {
section#feature {
    min-height: unset !important;
    height: calc(~"100vh - 96px") !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.