I am having trouble getting my product image gallery pictures (stacked) to align vertically rather than horizontally. Some of the images are in different aspect ratios (ie portrait and landscape) so having them aligned horizontally will not work. I would like the vertical padding to remain equal between images so that I do not have a big gap as pictured in the attached image. I am using Dawn Theme. I have spent a great amount of time trying to find a solution myself but I am very stuck. Any help would be greatly appreciated.
Hi @nevadaskye ,
Can you share your store URL
Hi @nevadaskye ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
@media screen and (min-width: 750px) {
.product__media-list .product__media-item {
width: 100% !important;
}
}
Hope it helps!
7IVrwbHzXxkn60c
The example of the issue would be under “Tables” > “Coffee Tables” > “Coffee Table 2”
unfortunately this seemed to have no effect on the spacing/alignment of the media gallery images
I think my wording may have been confusing. I am trying to get the area above and below the images to be equal. It appears that currently the photos are being aligned horizontally by the top of the image, creating a large gap when the two photos are of different aspect ratios.
Hi @nevadaskye ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
.product__media-list .product__media {
padding-top: 66% !important;
}
Hope it helps!
That is very close but is it possible to keep the images in their original aspect ratios. Similar to this https://codepen.io/kreigd/embed/KRYzdd?height=316&theme-id=0&default-tab=result
Hi @nevadaskye ,
This will be a complicated request because you need to add JS for it, so it will be difficult for someone to guide you in detail.
If you want to do it, i recommend you to hire a professional, refer https://community.shopify.com/category/shopify-job-board