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

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!
 

Can you share link to page in screenshot? We can check easier

Hello Tuanphan. Site is not live yet... but should be by end of weekend. I'll post the link here as soon as it is live. Thank you so much for noticing my post and hopefully being able to help me shortly.

Hello Tuanphan. Just a little note to let you know the website is now live. Here is the store address to a product - https://www.worksbyshaun.com/shop/p/be-gentle-collection-large

Thank you so much again!

Thank you so much Paul, I'll give this a go.

Update... Awesome stuff Paul, all fixed, thank you! Learned a bunch.

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!

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!

Add to Design > Custom CSS

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

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!!

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!!

Can you share link to this product?