Re: Issue resizing an image for mobile

LiamP191 · ‎09-10-2023

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?

Dan-From-Ryviu · ‎09-11-2023

Sorry, my bad. Please update code like this

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

DitalTek · ‎09-10-2023

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

LiamP191 · ‎09-10-2023

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

Password: lytral

LiamP191 · ‎09-10-2023

On the mastic gum page

Dan-From-Ryviu · ‎09-10-2023

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;
  }
}

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LiamP191 · ‎09-11-2023

Hey Dan,

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

Please see

screenshot

Dan-From-Ryviu · ‎09-11-2023

Sorry, my bad. Please update code like this

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LiamP191 · ‎09-11-2023

Thank you so much for helping Dan!

Dan-From-Ryviu · ‎09-11-2023

Happy I could help 😊!

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LiamP191 · ‎09-11-2023

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 · ‎09-11-2023

Which ones?

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LiamP191 · ‎09-11-2023

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

Jayzeeforshort · ‎02-29-2024

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 · ‎02-29-2024

Hi @Jayzeeforshort

Unfortunately, I cannot access to your store.

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Jayzeeforshort · ‎02-29-2024

Hi, can you please try again:

https://www.gharfurniture.com/

I am unsure why that keeps happening sometimes

Dan-From-Ryviu · ‎02-29-2024

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>

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Jayzeeforshort · ‎02-29-2024

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 · ‎02-29-2024

Code updated.

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

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Issue resizing an image for mobile

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

Community Blog Articles