Looking for help with padding css

Site URL: http://www.magicalsantaletters.ie

Hi there,

I'm hoping someone can help, please 🙂

I love how the padding looks on my mobile homepage, (the space between the hamburger and the first image and the last image and the line block)

Is there custom-css to make it the same on my shop page, the product pages, the about page, the 'how it works' page and the contact page? As it stands the space 

my website is http://www.magicalsantaletters.ie

Thank you in advance,

- Aoife

What I am seeing is pages other than the home page, the page contents are a little closer to the top than the home page. So in effect you'd like the non home page pages content to be a little further down?

Add the following to Design > Custom CSS.

/* begin bring back some pages padding top */

  @media screen and ( min-width: 800px ) {
  
    /* about */
    
    #collection-5fa6b1686e5c7b08c1799901 .sqs-layout:not( .sqs-editing ) .sqs-row .sqs-block:not( .float ):not( .sqs-feature-gated-wrapper ):first-child,
    
    /* how it works */
    
    #collection-5f4fddd390bc7737551227bf .sqs-layout:not( .sqs-editing ) .sqs-row .sqs-block:not( .float ):not( .sqs-feature-gated-wrapper ):first-child,
    
    /* contact page */
    
    #collection-5f4fde8472232a72d6189efb .sqs-layout:not( .sqs-editing ) .sqs-row .sqs-block:not( .float ):not( .sqs-feature-gated-wrapper ):first-child {
    
      padding-top: 17px;
      
      }
      
    /* shop page */
    
    .products.collection-content-wrapper {
    
      padding-bottom: 0;
      padding-top: 2vw;
      
      }
    }
    
  /* end bring back some pages padding top */

Let us know how it goes.

Thanks for that, it works really well! Is there a way to bring the image block up a tiny bit more to meet the hamburger on the about page? 

And then is there a code like the one above for the actual product pages?

I appreciate your help 🙂

- Aoife

I've updated the CSS in my previous post. Replace the code I provided before.

I wrapped the previous code in a media query that only applies the changes at 800 pixels width or more. The result is on mobile its a little tighter spacing.

Let us know how it goes.