How do I make All the images on the homepage responsive?

New Member
2 0 0

Hello,

I am designing my online store with the Debut theme and not sure where to go after Themes > Edit HTML/CSS to make my slideshow and uploaded images on my homepage responsive on both the tablet and mobile devices. I have looked at several forum but still confused on where to locate the change. I have included a screenshot of what it looks like on mobile device. 

Thanks for your help! 

0 Likes
New Member
2 0 0

Here is the screenshot of the slideshow image on the homepage from the mobile view

0 Likes
Shopify Partner
60 0 2

I am not able to see your store to figure out the code to do this but a common trick is to add this to your css:

img {
  max-width: 100%;
}

That may or may not fix your particular issue.  

Freelance Developer - darian@optiqal.com
0 Likes
Shopify Expert
2678 65 668

Hi Devonna,

the explanation of what's happening is here. This approach looks good on a variety of screens but requires a carefully selected image.

You may try adding the code I've suggested here to the bottom of the theme.scss.liquid  Asset , but you need to set a proper aspect ratio.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes

Hi @Devonna_Payne1, I made a video tutorial for you on how to make slideshow and uploaded images on homepage responsive on both the tablet and mobile device. Hope this helps https://www.askquesty.com/post/images-responsive-shopify-tutorial

0 Likes
New Member
11 0 0

hi will this work for the mobile? and would i put the code in the same place? my desk top photos seems to be ok some cut off alittle but my mobiles pictures are cut off alot. if i change the shape of the picture to the mobile shape it will not be right for the desk top. what do you think?


@tim wrote:

Hi Devonna,

the explanation of what's happening is here. This approach looks good on a variety of screens but requires a carefully selected image.

You may try adding the code I've suggested here to the bottom of the theme.scss.liquid  Asset , but you need to set a proper aspect ratio.




 

0 Likes