Jump to content

Store/shop - product page layout has padding that makes a real mess of alignment, can it be corrected with CSS?

Go to solution Solved by paul2009,

Recommended Posts

Hello. I'm not sure how others find the 20 pixel padding on the store page acceptable, why it's not adjustable I have no idea!

The copy that appears to the left or right of the main slideshow/image galley has a 20 pixel value. It should only be 6 pixels to align it with the top of the graphics. My site is not live yet, but any store page will have this problem. I've put screen grabs below.

Also, there is a secondary problem in that the entire store (product page) is padded 6 pixels down from the top. I would love to correct this too.... meaning the text body would not need to be set to a padding of 6 pixels, but could be just 0, if the padding for the galley section was also zero. You can see the gap above the slideshow.

Is there a way with custom CSS to fix both of these issues or at a minimum, align the text copy with the top of the graphics as a compromise? I would be so grateful for any help. SS support has not been helpful in this matter.

Thank you!
 

Screen Shot 2022-02-03 at 7.56.24 PM.jpg

Screen Shot 2022-02-03 at 4.07.45 PM.jpg

Screen Shot 2022-02-03 at 4.08.33 PM.jpg

Link to comment
  • Solution

You can adjust the spacing by adding some CSS to Design > Custom CSS

The area on your screenshot labelled 6px is the padding below the Product Item Nav area, and can be adjusted with this:

@media screen and (min-width: 768px) {
  .ProductItem-nav {
    padding-bottom: 6px;
  }
}

The area you labelled 14 pixels is the padding above the Product Item Details area, and can be adjusted with this:

@media screen and (min-width: 768px) {
  .tweak-product-basic-item-content-alignment-top .ProductItem-details {
    padding-top: 6px;
  }
}

 

Did this help? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 months later...
On 4/26/2022 at 11:35 PM, C-bear said:

Hello I have a similar issue but the opposite way! I would love to move my text down on my site for the product page description... 

Website is:

https://www.chloebthomas.com/shop/7e0y648eeisvd2erkarvz9k38ebdid

Thank you so much!

Screenshot 2022-04-26 at 17.31.22.png

Add to Design > Custom CSS

/* Move product description down */
@media screen and (max-width:640px) {
div#productDetails {
    margin-top: 100px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.