Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


roem

Question

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

 

 

Edited by roem
Link to comment
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 1

May you try this custom css 

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

image.thumb.png.6af68f74ab0b4d6dc64132a07ac56215.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1
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;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

Edited by roem
Link to comment
  • 0

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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...