Skip to main content

Forums

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #295512
    1957Goldtop
    Participant

    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!

    #295748
    linkoo
    Participant

    Hi, you can try this in your CSS Editor:

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

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.