How to Add Padding to Squarespace Mobile View

How to Add Padding to Mobile View in Squarespace

Adding space on the sides of mobile view in Squarespace.

Thanks to T.M. for asking this question on my post Custom CSS Every Squarespace Website Needs.

Squarespace is a responsive website builder which makes life easy for website designers! You typically just design for desktop and then check on mobile and tablet to make any adjustments, rather than designing a whole new look for each. This is great user interface design, because it keeps the user experience fairly consistent across screen sizes.

Occasionally, we do need to make adjustments to mobile view. One I make often is removing the gap between primary and secondary navigation. And recently I was asked how to adjust padding on mobile. There are a couple of ways to achieve this, depending on the look you want. Here’s how my website looks on my iPhone 7 Plus (and yes, I agree it’s time for an upgrade!):

 
Original mobile view of my Squarespace website with no extra padding
 

If you’d like to add padding to both your words and images, you can do that by targeting .Site-inner. This allows the background color of your website to appear on the right and left:

 
Squarespace mobile view with site background showing on the left and right
 

This can be a nice solution and add a bit of contrast. It looks a little like something from an email marketing campaign with the border visible.

Adding padding to Squarespace mobile view - option 1.

To show your site background on the left and right of Squarespace mobile view, just add the following code to Design > Custom CSS.

Note: this code works on Brine family templates. For other template families, YMMV.

/*add padding to body for mobile devices*/
@media all and (max-width: 640px){
   .Site-inner{
     padding-left: 30px !important;
     padding-right: 30px !important;
   }
 }
Custom CSS Menu in Squarespace

Save your code. Then refresh your mobile view and you’ll see your site with a bit of background showing on the left and right, like the example above. You can adjust the max-width to target different screen sizes, as well as the padding value in pixels to change how much spacing you have on each side. If you also want to target your header and footer, you can do that with code as well. You’d use the same system, but target the header and footer using code you can find on my post about how to remove the header and footer from a mobile page.

Adding padding to Squarespace mobile view - option 2.

If you’d like to just add padding to your text in Squarespace mobile view, without affecting full width banners, add the following code to Design > Custom CSS.

Note: this code works on Brine family templates. For other template families, YMMV.

/*add padding to text for mobile devices*/
      @media only screen and (max-width: 640px){
        .sqs-block-html .sqs-block-content {
            padding-right: 30px;
            padding-left: 30px;
        }
      }

Save your code. Then refresh your mobile view and you’ll see your site with extra padding on the right and left of your content, like the image below. Again, you can adjust the max-width to target different screen sizes, as well as the padding value in pixels to change how much spacing you have on each side.

 
Mobile view on Squarespace with extra padding for site content
 
 

If this post was helpful, I’d love to know. Drop a note in the Comments ↓ with a link to your site and how you used the CSS.