How to stack images in one column using Dawn Theme?

Store Design

Topic summary

A user wants to change the Dawn theme’s product page image layout from a grid (one large image with two smaller ones) to a single-column stack of full-width images.

Solution provided:
Add custom CSS code to the base.css file in the theme’s Asset folder. The working code uses a media query to set product media items to 100% width on screens 750px and wider.

Key steps:

  • Navigate to Admin > Online store > Themes > Actions > Edit code
  • Open base.css under Asset folder
  • Insert the CSS snippet targeting .product__media-item.grid__item

Resolution:
After two iterations (initial code was missing a period, then needed max-width property added), the solution successfully changed the layout to single-column stacked images. Multiple users confirmed it worked for their stores.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hello,

For product pages, I want to use images in one column all the way down instead of one large image

and then two small images. Like this

Screen Shot 2022-05-25 at 2.38.42 PM.png
Screen Shot 2022-05-25 at 2.38.42 PM.png1128×1124 195 KB

instead of this

Screen Shot 2022-05-25 at 2.38.53 PM.png
Screen Shot 2022-05-25 at 2.38.53 PM.png1214×1288 222 KB

2

Hi @jaesielee ,

Just follow the instructions below.

  1. Go to your Admin page > Online store > Themes > Actions > Edit code.

  2. Open the base.css file under Asset folder and paste the code below.

@media screen and (min-width: 750px) {
product__media-item.grid__item {
    width: 100% !important
}
}
3

It’s not working.. still two columns

4

Sorry.. missing a period.

@media screen and (min-width: 750px) {
.product__media-item.grid__item {
    width: 100% !important
}
}
5

Still not working.. still looks like this

Screen Shot 2022-05-25 at 4.04.23 PM.png
Screen Shot 2022-05-25 at 4.04.23 PM.png1958×1280 246 KB

6

May I have your website?

7

Try this actually.

@media screen and (min-width: 750px) {
.product__media-item.grid__item {
width: 100% !important;
max-width: 100% !important;
}
}
5 Likes
8

worked :slightly_smiling_face: thank you

1 Like
9

Please close the query by selecting the answer. Thank you

10

worked perfectly for me! thank you!