Shopify themes, liquid, logos, and UX
Dear community!
I am trying to make my product pictures stack at full width. It currently works fine for screen width less than 990 px. At 990px, two pictures are placed next to each other horizontally (see screenshots for visulization). I would like all the pictures to stack with full width and minimum padding/margins. Example of desired final result - https://thegarmentcopenhagen.com/product/kelly-trench/
Website - maisonmagdalena.com
Password - MaisonMagdalena.222
Solved! Go to the solution
This is an accepted solution.
Hi @MagdalenaBB ! It looks like this was solved as viewing the site all the images take up thier full width space.
chrome windows desktop using responsive views devtools for screensizes like 990px
🙏 Remember you can share what you did and mark your own answer as solution for future merchants.
Generally to adjust this use a custom css setting with some css (that should already exist in such themes)
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
@media screen and (min-width: 749px) {
.product--stacked .product__media-item {
width: 100%;
max-width: 100%;
}
}
Just adjust or remove the surrounding media query sizing part to make it for ALL views.
But that theme should have a very different slider/gallery view for screens smaller than tablets(749px)
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
The setting I used is "stacked" and it is the only one close to my desired outcome. It also displays it correctly in shopify editor but displays it with 2 columns on full screen mode. Or is there a different setting I shall change?
@MagdalenaBB Use the view options in the top right of the theme editor to show full-width view.
If in full-width view it still divides non-primary images into two columns then that is the themes expected behavior.
So you should carefully consider WHY the designers make it do that.
Though this can also be a bug or a cache issue when making theme edits.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
Hi @MagdalenaBB ! It looks like this was solved as viewing the site all the images take up thier full width space.
chrome windows desktop using responsive views devtools for screensizes like 990px
🙏 Remember you can share what you did and mark your own answer as solution for future merchants.
Generally to adjust this use a custom css setting with some css (that should already exist in such themes)
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
@media screen and (min-width: 749px) {
.product--stacked .product__media-item {
width: 100%;
max-width: 100%;
}
}
Just adjust or remove the surrounding media query sizing part to make it for ALL views.
But that theme should have a very different slider/gallery view for screens smaller than tablets(749px)
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025