How can I alter the photo layout in Dawn theme?

Store Design
1

Hello,

I am currently using Dawn theme for my store and want to change the default product page to show two images in the first row rather than one, as it is set up by default. It is cumbersome to have to scroll past the first large image to see the remaining product photos. I have included a screen shot of an example product page layout from a different website for reference. Where would I change the settings to accomplish a look similar to the image attached?

Thanks!

Screen Shot 2021-12-21 at 2.45.30 PM.png
Screen Shot 2021-12-21 at 2.45.30 PM.png2734×980 194 KB

2

Hello

Just apply this code in your theme CSS file like base.css and you will get the desired result.

@media screen and (min-width: 750px){
.product__media-item:first-child {
    width: 50%;
}
}
.product__media-item:nth-child(3) {
    width: 100%;
}

Thank you.

3

@Anonymous When I add the code to the bottom of base.css it makes the first three pictures full size, rather than the first two 50% and the third 100% width. Is there anything else I should be adding to the code?

Thanks again for your help!

4

Try changing the @Anonymous 's code to:

@media screen and (min-width: 750px){
.product__media-item:first-child {
width: 50%;
}
product__media-item:nth-child(2) {
width: 50%;
}
.product__media-item:nth-child(3) {
width: 100%;
}

}

5

@khgamujtaba and @Anonymous thanks for both of your help. I added ‘!important’ at the end of each line indicating image width and was able to get it working.

@media screen and (min-width: 750px){
  .product__media-item:first-child {
  	width: 50% !important;
  }
  product__media-item:nth-child(2) {
  	width: 50% !important;
  }
  .product__media-item:nth-child(3) {
  	width: 100% !important;
  }
}
2 Likes
6

I am glad that it helped. You can mark the response as “resolved” so that others can benefit from it as well

1 Like