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

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.

Edited by creedon
version 2 of CSS

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.