Full Width Product Pictures Stacking Dawn Theme

Solved

Full Width Product Pictures Stacking Dawn Theme

MagdalenaBB
Excursionist
46 0 13

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

 

Snímka obrazovky 2025-01-27 123911.png

Snímka obrazovky 2025-01-27 123935.png

Accepted Solution (1)

PaulNewton
Shopify Partner
7721 678 1620

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


View solution in original post

Replies 3 (3)
MagdalenaBB
Excursionist
46 0 13

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_0-1737985947746.png

 

PaulNewton
Shopify Partner
7721 678 1620

@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


PaulNewton
Shopify Partner
7721 678 1620

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