How to make the product thumbnails bigger on Dawn Theme?

[RainbowSushi]

My product thumbnails are small, I tried all the other options in the Dawn theme and they're not what I want. I'd like for the images in my product page to be bigger or for the text and images to stretch out. I attached an example of how I'd like them to be. Example . Any Idea how to get that done? 

[tim]

Just in case -- your example site uses a Tailor theme https://themes.shopify.com/themes/tailor/styles/cotton 

So the easiest would be to purchase that theme.

Adding desired layout to Dawn is possible, but not a trivial change.

[RainbowSushi]

Thanks for the clarification. How can I do it on the Dawn theme?

[Dawood_Mirza_]

Hi @RainbowSushi, 
Drop the Store URL,
Same look and feel can be generated,

[RainbowSushi]

Hi, my store is still not published yet, I put a password because I'm still working on it. is there an easy way to get it done? 

[BSSCommerce-B2B]

Hi @RainbowSushi 

You can edit code in your theme:

Step 1: Go to Online store => Edit code

Step 2: Find file base.css 

Step 3: Add this code bellow at the end of file:

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width: 100%;
    }
}
@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        width: 100%;
    }
}

- This is the result:

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

Have a nice day sir! 

[RainbowSushi]

Hello!

Yes, this is exactly what I want, but I tried to put in the code and it did not work, any idea why? I took a screen shot of where I added the code. Thank you for trying to help!

[BSSCommerce-B2B]

Hi @RainbowSushi 

- First, in theme editor you should setup Desktop layout: Stacked 

-  Then you should try add !important property in css code: 

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width: 100% !important;
    }
}
@media screen and (min-width: 750px) {
    .grid--2-col-tablet .grid__item {
        width: 100% !important;
    }
}

I hope these instructions will help you. Have a nice day sir!