Re: How to Resize main product image

Solved

How to Resize main product image

avk9641
Excursionist
14 0 4

I am using dawn and trying to align my main product photo (width: large, height: adapt to image) to match the width of the multirow image below (section; component-with-text), but these is a slight misalignment. How can I get the main product image width to match the image below. 


Second, when I drag and resize the webpage, the main product info cuts into the area of the image and further reduces the image size. How can I create a container for the product description so it resizes like the text in the multi row (product-with-text) section 

https://uox9kzuezk3vn3fa-66469920945.shopifypreview.com

p/w: maongu

Thanks!

 

Screenshot 2024-08-14 at 6.17.11 PM.pngScreenshot 2024-08-14 at 6.17.50 PM.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10030 1998 2043

This is an accepted solution.

Hi @avk9641 

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 67% !important;
        width: calc(67% - var(--grid-desktop-horizontal-spacing) / 2) !important;;
    }
}
</style>

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10030 1998 2043

This is an accepted solution.

Hi @avk9641 

Please add this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (min-width: 990px) {
    .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: 67% !important;
        width: calc(67% - var(--grid-desktop-horizontal-spacing) / 2) !important;;
    }
}
</style>

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

avk9641
Excursionist
14 0 4

thanks, it worked by also adjusting the % of the info wrapper