How to make every product image full width in the product page? DAWN THEME

Store Design
1

How to make all the product images and videos appear in full width?

The current state of the product page is that all themedia is stacked over another, and I would like to make each media appear in full width

URL: Test – Abbasi (theabbasiandsons.myshopify.com)

Password: testingpage

What I am trying to achieve is something like this: Pearl Tasbih Bracelet – NIMAH (nimahlondon.com)

Where every image is on full width in the left side panel

1 Like
2

Hi,

To change the ratio of the product page, please add the code below to assets/base.css file.

@media screen and (min-width: 750px) {
  .page-width {
    max-width: 100% !important;
  }
  .product--small:not(.product--no-media) .product__media-wrapper {
    max-width: 65% !important;
    width: 65% !important;
  }
  .product--small:not(.product--no-media) .product__info-wrapper {
    max-width: 35% !important;
    width: 35% !important;
  }
}

That’s for PC only. You don’t need to change the mobile version.

The above code will make the page as below.

20220809_210032.png
20220809_210032.png1856×875 165 KB

Hope it helps.

Thanks.

1 Like
3

@DavidEKim Hi, Thank you for replying

Your code block worked but there is a small issue, the thing is only the first image takes the full width and images below are stack side by side, so is there a way to make all images appear in full width one below each other?

Thank you so much again!

4

Hi,

That’s happened by the Dawn theme image stack layout. To change the layout as you want, the product page must be modified (by coding). You may use different Shopify Free themes. There are many free themes available but I would recommend you to use Shopify 2.0 themes.

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify

If you want to customize your theme (the product page), please let me know.

If the job is simple enough, I’ll ask you to buy me a coffee. :slightly_smiling_face:

If you have any other questions or need more help, please send me a private message.

Thanks.