Jump to content

Fixed header/footer with centered content in screen and no scroll

Recommended Posts

Site URL: https://impala-falcon-5gh6.squarespace.com/

Hi! Please excuse me if I don't use the correct terminology, but...

I am trying to center and gallery section on a single page with a simple header/footer, just text. The content (in this case the gallery images) should scale to fit the vertical height of the browser window while always showing the header/footer (no scrolling).

My site is https://impala-falcon-5gh6.squarespace.com/ and the password is "1234", it's a WIP and for the moment I'm focused on achieving this before proceeding with the styling of type etc. and final images.

I have attached a jpg of what I am hoping to achieve. So that the gallery is vertically centred on the page and the header and footer and fixed to the top/bottom of the page and there is no scroll. I've searched the forums but haven't had much luck. 

If anybody has some advice it would be greatly appreciated, I realise this might involve some custom CSS.

xA

center.jpg

Edited by thegluefactory
Link to comment
  • Replies 9
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
  • 1 year later...

@tuanphan Hi! I am trying to do this exact same thing with the site studiogoetz.com.

The code you previously shared just locks the screen in the position it is in on any given browser. I want the header and footer to be static at the top and bottom of the page without needing to scroll, and the gallery in the center to resize based on browser. Is that possible? I'm using the Avenue template on 7.0. 

Thanks!

Link to comment
On 2/1/2022 at 3:45 AM, sg_squarespace said:

@tuanphan Hi! I am trying to do this exact same thing with the site studiogoetz.com.

The code you previously shared just locks the screen in the position it is in on any given browser. I want the header and footer to be static at the top and bottom of the page without needing to scroll, and the gallery in the center to resize based on browser. Is that possible? I'm using the Avenue template on 7.0. 

Thanks!

Hi. FOr homepage only or all pages?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Try adding to Design > Custom CSS

div#canvas {
    height: 100vh !important;
}

section#page {
    max-height: calc(100vh - 200px) !important;
    height: 100% !important;
    overflow: hidden;
}

footer#footer {
    height: 100px !important;
}

html, body {
    overflow: hidden;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.