Jump to content

On mobile, footer is cut-off

By cpaprocki, in Customize with code

Go to solution Solved by Square_Ace,

Recommended Posts

cpaprocki Level 2

cpaprocki

Posted
Posted

Site URL: https://www.thelosangeleseffect.com/

Hello,

I am trying to figure out how to make sure my footer is aligned to the bottom of the browser window on mobile. Currently, it is cut-off by the control panel on both Chrome & Safari. 

I would like all elements to stay within the viewable window size and make sure there is never a scroll option on this page.

On desktop, it appears correctly. 

IMG_5348.PNG

Screenshot 2024-10-15 at 12.00.45 PM.jpg

  • Replies 2
  • Views 355
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Square_Ace
Square_Ace

Hi you need to use 100svh like this: #siteWrapper { display: flex; flex-direction: column; min-height: ~'100svh'; }  

cpaprocki
cpaprocki

That's great @Square_Ace!!! Thanks for the fast and correct solution.

Posted Images

  • Solution
Square_Ace Level 8

Square_Ace

Posted
  • Solution
Posted

Hi you need to use 100svh like this: 

#siteWrapper {
    display: flex;
    flex-direction: column;
    min-height: ~'100svh';
}

 

Square Ace

Enhancing Squarespace websites for over a decade. I am an expert in writing custom code for the Squarespace platform.
Tailor-made, reusable solutions to your problems, whether it's styling, layout or functionality.
Maverick Squarespace Designers, I'll be your Goose. If your tools are holding back your creative vision, maybe I can help.
I also build useful plugins for Squarespace (with some really positive reviews) including the popular high-quality video background plugin.

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources