Liquid, JavaScript, themes, sales channels
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.
User | RANK |
---|---|
21 | |
21 | |
8 | |
8 | |
8 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023