Reduce Mobile Padding (Squarespace Site)…

[Historical Forums User]

Any help on some CSS code to reduce the padding on the mobile version of my website. An example page:
https://s72businessportraits.com/who

Thanks!

[linkoo]

Hi, you can try this in your CSS Editor:

@media all and (max-width: 768px){
   .Site{
     padding-left: 30px !important;
     padding-right: 30px !important;
   }
 }

[Historical Forums User]

Thank yo for the suggestion! That worked, but not quite in the way that I was hoping… this added the padding on the entire page. A better page to view this with would be this one:
https://s72businessportraits.com/mission

In the Squarespace “design settings” there is an option for “Site Border”, which effects the site similarly to the code you gave me. Then there is another option called “Site Padding”. And this effects the elements on the page.

So for example on the page above, the black section at the top (which is actually an image being used as the background), if I have the “Site Border” set to 30px you will see a 30x white area around the black “background” section and all the way down the page. But if I keep “Site Border” at 0px but change the “Site Padding” to 30px there will be no white border in the black “background” area but the sections below that , which are just page elements (an image, text, etc) will move in 30px.

I hope I’m explaining that right.

Jeff

[Author]

Posts