Jump to content

FOOTER ON MOBILE - Increase padding at top / Change font size for mobile

Recommended Posts

Hi, Can I please get some help with custom code to fix how many footer looks on mobile. Works fine on desktop, just need code for mobile and ipad. 

1. How can I add more space/padding between the image block and the footer (so there is more of a gap between the image and the word OPENING? Just for when viewed on mobile/ipad

2.  How can I change the font size for when viewed on just mobile/ipad? 


Screen Shot 2022-03-10 at 9.00.19 am.png

Link to comment
  • Replies 1
  • Views 254
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Im a serious novice and only began learning some weeks ago thanks to here and my own site, so I could be completely wrong. Without having your websites address i can only guess though. A code like this SHOULD work i think. the @media screen and (max-width: xxx) denominator singles out basically cell phone displays only. then add the block id of your footer, and adjust the margin. Still need your url tho. I hope this works lol


1 -> *make sure mobile view is on so you can SEE changes*
2-> if you dont already have it, install chrome extension "Squarespace ID Finder" so you can easily find the block IDs on your page for one of the steps below



Go to "Design> Custom CSS" and enter :


//this is for footer spacing
@media screen and (max-width: 800px) {
#BlockIDofYourFooter {
  margin-top: ENTERANUMBERHEREpx; 

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.