I want to have the photos on top of each other instead of next to each other. I think this is a common problem, but haven’t been able to find a solution that works for me on here!
Any help is much appreciated! Thanks!
Topic summary
A user seeks to display product photos in a single column (stacked vertically) instead of the default two-column layout in the Dawn theme.
Initial Attempts:
- Multiple support teams requested the store URL to provide tailored solutions
- One suggested CSS snippet targeting
.product__media-itemwithwidth: 100%was tested but did not resolve the issue
Resolution:
The user found a working solution and shared it. The fix involves adding specific CSS to the base.css file:
@media screen and (min-width: 750px) {
.product-media-item.grid__item {
width: 100% !important;
max-width: 100% !important;
}
}
This media query ensures product images stack in one column on larger screens while maintaining responsive behavior. The issue is now resolved with this CSS modification.
Hello @donda_lopez ,
It’s GemPages support team and glad to support you today.
Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?
Best regards,
GemPages Support Team
Hi @donda_lopez
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution.
@donda_lopez
Hello,
Can You Please Share Your Store URL?
I will Check And Provide proper Siolution
Or
.product__media-list .product__media-item {
width: 100% !important;
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid
Like this
That didn’t work! Here is my website (not all products are filled in)
https://titleofwork.myshopify.com/
code: z1xz4ch