Solved

DAWN 2.0 theme - Product description resize on product page

SilverBeach
Tourist
13 0 3

I've just upgraded themes from Debut to Dawn theme. As with everyone else the Debut product page was perfect and I want to replicate that as much as possible.

I already followed a solution to resize the main product image. 

The image was resized using this: (I changed it from 64% to 30%)

.product:not(.product — no-media) .product__media-wrapper {
 max-width: 64%;
 width: calc(64% — 1rem / 2);

My question now is how can I resize the product description and make it larger to fill the page again (i want to stretch it to fill the red area highlighted below).

Thanks 

Dawn product page.PNG

Accepted Solution (1)
Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

@SilverBeach 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    max-width: 70% !important;
    width: 70% !important;
}
}

 

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 7 (7)

Hardik29418
Shopify Partner
2858 407 1073

Hello, @SilverBeach 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
Hardik29418
Shopify Partner
2858 407 1073

This is an accepted solution.

@SilverBeach 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    max-width: 70% !important;
    width: 70% !important;
}
}

 

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
SilverBeach
Tourist
13 0 3

I can't seem to find theme.scss.liquid under the Asset menu..

SilverBeach
Tourist
13 0 3

All good! It worked! Thank you

Wishpools
Excursionist
20 0 4

Hi, where did you find the theme.scss.liqud file?

SilverBeach
Tourist
13 0 3

It's under Assets > section-main-product.css and I just pasted the code at the bottom