Autofit images in description on mobile

Solved

Autofit images in description on mobile

pawsitivewags
Visitor
2 0 0

Hi,


I am looking to have images I put in my description autofit margins on mobile. Currently it is overflowing, causing people to scroll left/right to see the full image. Ideally I would like to ensure the description images are viewable for both mobile and desktop without needing to scroll left/right.

 

Here's a link to the shop -https://pawsitivewags.myshopify.com

 

Thanks in advance!

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Hi @pawsitivewags 

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

{%- if template.name contains 'product' -%}
<style>
.page-width img {
max-width: 100% !important;
height: auto !important;
}
</style>
{%- endif -%}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

round
Shopify Partner
113 18 10

@pawsitivewags  Hope you are well
are you want like this

round_0-1719518803443.png

 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
pawsitivewags
Visitor
2 0 0

Hi - actually the issue is the image cutting off on product pages. For exampled, the images in the description on this page cut off on the right. Ideally its fitted for mobile

image issue.JPG

 

Dan-From-Ryviu
Shopify Partner
8435 1660 1674

This is an accepted solution.

Hi @pawsitivewags 

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

{%- if template.name contains 'product' -%}
<style>
.page-width img {
max-width: 100% !important;
height: auto !important;
}
</style>
{%- endif -%}

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.