Adjust spacing on mobile device?

Hello,

I am attempting to adjust the spacing of the home page on a mobile specific device.

www.philipandco.comPassword: arvasolutions

Currently when you arrive on the homepage of the website on a mobile device the first peice of content is the subscribe block, however, the block is so far down with tons of white space on the mobile device you can barely see it. Is there a way that I can adjust this through the developer platform and if so I would love your help!

Cheers

Add this code to your custom css from Design> Custom CSS

I would recommend adjusting the max-width as per your needs. The padding-top and padding-bottom are currently 150px by default. I have changed it to 10px

/*remove padding for mobile devices*/
@media only screen and (max-width: 640px){
 .index-section-wrapper .content:not(.gallery-content) {
     padding-top: 10px;
     padding-bottom: 10px;
 }
}

I copied and pasted the code above into the custom CSS and is states that there is a syntax error in "@media only screen and (max-width: 640px)". I tried saving it and nothing happened... Any thoughts?

Updated the code to add parentheses. Try it now.

Nevermind, for some reason it did not copy the extra bracket at the end of that code... Thank you!!

I did not add it the first time along. I updated the code. :)

Thank you! Really helped me finding the code for adding right and left padding on Rover mobile texts.

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