Jump to content

Make footer rest at the very bottom of the page (remove the margin at the bottom and sides)

Recommended Posts

Site URL: https://cyan-snail-gt4d.squarespace.com/

Hi All, 

I'm trying to make the footer on my "test" website actually touch the bottom of the page, yet I cannot seem to make this happen. Using custom CSS to change the margin and padding doesn't work, although I'm able to get it to somewhat work if I make the #footer "fixed" as opposed to relative or absolute. My header is fixed aswell, and that actually makes it stick to the top and take up the true full width of the page.  (Note: I'm using the Wexley template as a base) 

On both the header and the footer, if I change it from fixed to relative, all of a sudden the margins on all sides reappear--despite me setting the margins to 0px. Is there a way to make the footer touch the very bottom of the page and extend the full width of the page WITHOUT it being set to "fixed"?

I've attached a screenshot showing the header, footer and red "X" marks on the sides and bottom to show the gap I would like to eliminate. I'd like the footer to look like the header without it needing to be fixed.

Any help would be appreciated! 

(The password to the site is: 123)

 

Footer.thumb.PNG.d85a1676fddf917c8cf9e22665b3a467.PNG

 

 

Link to comment
  • Replies 5
  • Views 2k
  • Created
  • Last Reply

May you try this custom css 

#pageWrapper, #canvas {
  padding: 0;
}
#mainContent {
  padding: 0 60px;
}
#footer {
  overflow: hidden;
}

image.thumb.png.6af68f74ab0b4d6dc64132a07ac56215.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 hours ago, roem said:

Thanks so much, bangank36--that worked perfectly, but only on the portfolio page. Do you know why it's not applying correctly to the other pages?

Other page like blog has a white space for sidebar on the right, if you decided not need the sitebar so can use this to hide it

#pageWrapper, #canvas {
  padding: 0;
}
#mainContent {
  padding: 0 60px;
}
#footer {
  overflow: hidden;
}
.collection-type-blog.blog-sidebar-right #mainContent, .collection-type-blog.blog-sidebar-right #footerWrapper, .collection-type-blog.blog-sidebar-right .page-header {
  margin-right: 0;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi bangank36

That code doesn't seem to work either. The white margin still appears on the right. Same for the "About" page and "Contact" page. The only page that looks good is the "Portfolio" page for some reason. On the "Contact" page, the footer isn't even hitting the bottom either. 

I've inserted two pictures below.

*EDIT:  I seemed to have fixed the right-side margin problem by going into "Site Styles" and switching the "Page Width" from 1800px to 100% (I had to manually type in 100%).

The bottom margin still appears on the "contact" page though. And even though the width problem is solved, I'd still like to know why the manual CSS code wasn't working as well as why only the "Portfolio" page was working...any thoughts?

1823450731_CaptureContactPage.thumb.PNG.ca26a9d67896aebb7f48bb3fc3d75535.PNG

Capture.thumb.PNG.a7e38926dccfbede9d75777355e11367.PNG

Link to comment

The template give space for sidebar, as you turned it off by change the css and contact page content simply too short so the footer is moved from bottom

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.