Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Dawn Theme Product Page Description Width Adjustment

Solved

Dawn Theme Product Page Description Width Adjustment

Toki
Visitor
2 0 0

Hey everyone, 

 

i followed this instruction to reduce the size of the main product image, however, the product title/description remains at the same width, leaving a very big empty space on the right of the screen (see here)

 

Is there any way to expand the width of the description so that it fills up the empty space nicely? 

Appreciate your help! 

Z

Accepted Solution (1)

MarinaPetrovic
Shopify Partner
559 124 193

This is an accepted solution.

Hi @Toki . Go to assets/section-main-product.css.
Find this element:

.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 36%;
    width: calc(36% - 0.5rem);
}

 

And change value of 'max-width'. For example:

.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 42%;
    width: calc(42% - 0.5rem);
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

View solution in original post

Replies 4 (4)

MarinaPetrovic
Shopify Partner
559 124 193

This is an accepted solution.

Hi @Toki . Go to assets/section-main-product.css.
Find this element:

.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 36%;
    width: calc(36% - 0.5rem);
}

 

And change value of 'max-width'. For example:

.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
    padding-left: 4rem;
    max-width: 42%;
    width: calc(42% - 0.5rem);
}
M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Toki
Visitor
2 0 0

Thank you so much! this worked perfectly 

MarinaPetrovic
Shopify Partner
559 124 193

@Toki you're welcome. 🙂 

M.Petrovic | Shopify Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

oscprofessional
Shopify Partner
16407 2444 3196

@Toki ,

I have checked your store, It will not done by simple css. You need to check the code and and adjust the code to design proper layout. It is time consuming task.

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...