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  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...

Hi! I'm also having a lot of trouble with my product page alignments. It seems to me that something might be off in the text & image padding. Whichever product design view option I select, the text either appears only in a skinny strip with a tiny image, or like this half page image (it's huge!) and half page text. How can I adjust the css text & image padding to be legible? Thank you!!image.thumb.png.7f29272c79595f8414dbf1dd8fc8d426.pngimage.thumb.png.65ef73885ccca85c14b7569efa0eb84e.png

Link to comment
On 1/11/2024 at 5:07 AM, aevesam said:

Hi! I'm also having a lot of trouble with my product page alignments. It seems to me that something might be off in the text & image padding. Whichever product design view option I select, the text either appears only in a skinny strip with a tiny image, or like this half page image (it's huge!) and half page text. How can I adjust the css text & image padding to be legible? Thank you!!image.thumb.png.7f29272c79595f8414dbf1dd8fc8d426.pngimage.thumb.png.65ef73885ccca85c14b7569efa0eb84e.png

Can you share link to this product?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.