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
7678 1493 1496

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 or Accept solution! or Buy me a 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
660 79 93

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
7678 1493 1496

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 or Accept solution! or Buy me a 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
7678 1493 1496

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 or Accept solution! or Buy me a 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
7678 1493 1496

Happy I could help 😊!

- Helpful? Like or Accept solution! or Buy me a 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
7678 1493 1496

Which ones?

- Helpful? Like or Accept solution! or Buy me a 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
7678 1493 1496

Hi @Jayzeeforshort 

Unfortunately, I cannot access to your store.

 Screenshot 2024-02-29 at 14.09.48.png

- Helpful? Like or Accept solution! or Buy me a 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
7678 1493 1496

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 or Accept solution! or Buy me a 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
7678 1493 1496

Code updated. 

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

 

- Helpful? Like or Accept solution! or Buy me a 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