Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  1957Goldtop 4 days, 20 hours ago.

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.

icon-link icon-logo-star icon-search icon-star