Re: Issue resizing an image for mobile

Solved

How to resize an image for mobile in a custom liquid section?

LiamP191
Shopify Partner
25 1 4

Hey,

 

I have an image that I've placed in my custom liquid section on Shopify.

 

The image is the correct size on desktop but on mobile its way too small.

 

How can I fix this?

 

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Sorry, my bad. Please update code like this 

@media screen and (max-width: 749px) {
  img {
    width: 100% !important;
  }
}
  

- 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 17 (17)

VIEKIN
Shopify Partner
662 79 94

For easy to check your issue, you can provide store's url here, if your store is protecting by password you can provide too.

About your issue i think you can fix it via css.

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
LiamP191
Shopify Partner
25 1 4

Hey Joseph https://gigachew.com.au/password

 

Password: lytral

LiamP191
Shopify Partner
25 1 4

On the mastic gum page

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Hi @LiamP191 

You can solve it by adding this CSS code in Custom CSS of that image section in your product customize 

@media screen and (max-width: 749px) {
  .img {
    width: 100% !important;
  }
}
  

Screenshot 2023-09-11 at 10.53.20.png 

- 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.

LiamP191
Shopify Partner
25 1 4

Hey Dan,

 

I did what you said but it didn't do anything.

 

Please see

Capture.PNG

screenshot

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

Sorry, my bad. Please update code like this 

@media screen and (max-width: 749px) {
  img {
    width: 100% !important;
  }
}
  

- 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.

LiamP191
Shopify Partner
25 1 4

Thank you so much for helping Dan!

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Happy I could help 😊!

- 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.

LiamP191
Shopify Partner
25 1 4

Hey Dan,

 

IF you know why possibly you could help with this too.

 

On my home page there are images that go blurry when In mobile view.

 

Is that something you know how to fix?

 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Which ones?

- 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.

LiamP191
Shopify Partner
25 1 4

It might only be in the mobile editor on desktop, here it is though.

2222.PNG

Jayzeeforshort
Visitor
3 0 0

Hello Dan,

 

I am having the same issue, Gharfurniture.com 

 

You can see on the home page many of the images are not sized to fit mobile version - I tried adding the code to the Custom CSS of the Slideshows but it did not work. Can you please help! Thank you 🙂

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Hi @Jayzeeforshort 

Unfortunately, I cannot access to your store.

 Screenshot 2024-02-29 at 14.09.48.png

- 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.

Jayzeeforshort
Visitor
3 0 0

Hi, can you please try again: 

 

https://www.gharfurniture.com/

 

I am unsure why that keeps happening sometimes 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Hi @Jayzeeforshort 

You are using background image for your section. You can try to add this code to theme.liquid file after <head> to check 

<style>
@media (max-width: 749px) {
.itemv-slide-h3 { 
background-size: contain; 
background-position: top center;
}
}
</style>

- 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.

Jayzeeforshort
Visitor
3 0 0

Jayzeeforshort_0-1709197038663.png

Hello is this right if so it did not work - is there a better way to go about it if not background? I assumed it was part of my slideshow image 

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

Code updated. 

<style>
@media (max-width: 749px) {
.itemv-slide-h3 { 
background-size: contain !important; 
background-position: top center !important;
}
}
</style>

 

- 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.