Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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.
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.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025