FROM CACHE - en_header
Promotion image

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

Solved

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

LiamP191
Shopify Partner
25 1 4
‎09-10-2023 10:13 PM

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?

 

 

Labels:
2,227 Views
0 Likes
Report
Accepted Solution (1)
In response to LiamP191

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎09-11-2023 12:13 AM

This is an accepted solution.

Sorry, my bad. Please update code like this 

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

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

2,168 Views
0 Likes
Report
Replies 17 (17)

DitalTek
Shopify Partner
857 103 121
‎09-10-2023 10:17 PM

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 you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatsApp
- Website: ditaltek.com
2,220 Views
0 Likes
Report
In response to DitalTek

LiamP191
Shopify Partner
25 1 4
‎09-10-2023 10:35 PM

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

 

Password: lytral

2,212 Views
0 Likes
Report
In response to DitalTek

LiamP191
Shopify Partner
25 1 4
‎09-10-2023 10:38 PM

On the mastic gum page

2,207 Views
0 Likes
Report
In response to LiamP191

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎09-10-2023 11:53 PM

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 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,180 Views
0 Likes
Report
In response to Dan-From-Ryviu

LiamP191
Shopify Partner
25 1 4
‎09-11-2023 12:11 AM

Hey Dan,

 

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

 

Please see

Capture.PNG

 

screenshot

2,173 Views
0 Likes
Report
In response to LiamP191

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎09-11-2023 12:13 AM

This is an accepted solution.

Sorry, my bad. Please update code like this 

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

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,169 Views
0 Likes
Report
In response to Dan-From-Ryviu

LiamP191
Shopify Partner
25 1 4
‎09-11-2023 12:17 AM

Thank you so much for helping Dan!

2,165 Views
1 Like
Report
In response to LiamP191

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎09-11-2023 12:17 AM

Happy I could help 😊!

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,164 Views
1 Like
Report
In response to Dan-From-Ryviu

LiamP191
Shopify Partner
25 1 4
‎09-11-2023 12:20 AM

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?

 

2,163 Views
0 Likes
Report
In response to LiamP191

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎09-11-2023 12:23 AM

Which ones?

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

2,162 Views
0 Likes
Report
In response to Dan-From-Ryviu

LiamP191
Shopify Partner
25 1 4
‎09-11-2023 12:28 AM

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

2222.PNG

 

2,161 Views
0 Likes
Report
In response to Dan-From-Ryviu

Jayzeeforshort
Visitor
3 0 0
‎02-29-2024 02:06 AM

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 🙂

1,628 Views
0 Likes
Report
In response to Jayzeeforshort

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎02-29-2024 02:10 AM

Hi @Jayzeeforshort 

Unfortunately, I cannot access to your store.

 Screenshot 2024-02-29 at 14.09.48.png

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,627 Views
0 Likes
Report
In response to Dan-From-Ryviu

Jayzeeforshort
Visitor
3 0 0
‎02-29-2024 02:32 AM

Hi, can you please try again: 

 

https://www.gharfurniture.com/

 

I am unsure why that keeps happening sometimes 

1,621 Views
0 Likes
Report
In response to Jayzeeforshort

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎02-29-2024 02:39 AM

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>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,620 Views
0 Likes
Report
In response to Dan-From-Ryviu

Jayzeeforshort
Visitor
3 0 0
‎02-29-2024 03:57 AM

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 

1,610 Views
0 Likes
Report
In response to Jayzeeforshort

Dan-From-Ryviu
Shopify Partner
11349 2224 2397
‎02-29-2024 04:01 AM

Code updated. 

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

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,608 Views
0 Likes
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy