Re: how to optimize the image size on mobile

CarStory · ‎07-09-2024

Hello.

I urgently need a help on my Refresh Theme.

I used a custom liquid code of "product.description" in order to move description part of a product down from image so it shows separately.

However, the image is not optimizing on mobile phone. If you look at the picture i posted below, It's only showing the left part of the image.

I guess the image resolution is too large or something.

Can you guys please help me on this?

Dan-From-Ryviu · ‎07-09-2024

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

<style>
@media (max-width: 749px) {
#shopify-section-template--18110968987896__custom_liquid_Fc9qBp img { max-width: 100%; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Rahul_dhiman · ‎07-09-2024

HEllo @CarStory
Please provide the URL of your website.

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront

BEST CUSTOMER ACCOUNTS APP WITH CUSTOM WISHLIST OPTION 
TRY OUR APP :

CarStory · ‎07-09-2024

carstory.store

Dan-From-Ryviu · ‎07-09-2024

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

<style>
@media (max-width: 749px) {
#shopify-section-template--18110968987896__custom_liquid_Fc9qBp img { max-width: 100%; }
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

oscprofessional · ‎07-09-2024

Hello @CarStory
Go to online store > Edit theme code > theme.liquid > Insert the code before closing </body>.

<style>
@media (max-width: 767px) {
  body .detail-desc-decorate-richtext img {
     width: 100%;
     max-width: 100%
  }
}
</style>

how to optimize the image size on mobile