Jump to content

Looking for help with padding css

Recommended Posts

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

Link to comment
  • Replies 3
  • Views 488
  • Created
  • Last Reply

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.