Jump to content

Reduce spacing above title on product pages with multiple images

Go to solution Solved by SQSPStarter,

Recommended Posts

Hi there,

Is there a way to reduce the spacing above the product title on product pages which include multiple images such as below? The spacing on all other product pages is fine. It is only an issue on pages where I have multiple images added to a product.

Thanks!

 

Screenshot 2023-01-09 at 12.42.48 p.m..png

Link to comment

@niteshifte. This Code will do the job for you. Add it in Design > Custom CSS

@media screen and (max-width: 767px){
  .ProductItem-gallery {
    padding-bottom: 25px !important; /* Play with the pixals here */
  }
}

Let me know how it goes 🙂

Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.

Join us on this exciting journey. Ping us here!.

Link to comment

hey there! Thanks for all the quick replies, you have no idea how grateful I am!!

So that code controls the space between the product image and the thumbnails below which is actually great as I needed that as well. 

What I was looking for however in this case was to control the spacing above the title and the thumbnails. Would you code to control this by any chance?

Thanks so much!

Link to comment

So basically I'd like the same spacing above the title as what I have on all the other single image products as you see below. It's important however that this is only changed on mobile as desktop is fine and that it only affects multiple image products.

Screenshot 2023-01-09 at 1.00.33 p.m..png

Link to comment
  • Solution

Thanks for sharing the URL. This code will work for you.

@media screen and (max-width: 767px){
  .ProductItem-gallery-thumbnails {
    margin-bottom: 15px !important; /* play with pixals here*/
  }
}

Let me know how it goes 🙂

Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.

Join us on this exciting journey. Ping us here!.

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.