Dawn: Excessive top padding on product-thumbnail (main product page)

Danh11
Shopify Partner
81 2 32

In the Dawn theme on the product page, the container of the thumbnail image has a massive amount of padding-top set in the style attribute. It ends up being about 100% of the image height. It's doing some weird calculation and I'm sure it's probably done for a reason, but I can't work out why it's there. The following div wraps the image..

<div class="product__media media" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">

 

Also, all of the images I have for the products are tall and narrow. With Dawn having the width set at 100%, it makes them huge. Like, absolutely massively huge. I'd rather not go ripping out half of the code to make this work.

Reply 1 (1)

Danh11
Shopify Partner
81 2 32

After setting up another store with other content, I see that it's the tall product images that are the root of the problem. And also that some changes I've made to some stylesheets somewhere have caused the padding to go bad (I realise that it's there to create height for the container holding the image).

I guess the only fix to get around the images that are about 3 times the height of a desktop viewport is to use images that aren't so narrow.