Resizing image for tablet and mobile screen

Hello,

I’m tweaking my style between desktop and mobile.
My image exceeds the tablet screen size.
20
How can I accommodate an image inside tablet/mobile screen?

my ReadOnly link

thank you

Hi @aym
Welcome to the forum :webflow_heart:

All the settings you gave to the image are preventing it from being responsive as it naturally is.
You can either give it with on each breakpoint (e.g. 100%), or remove all the max-width / min-width properties. In both these cases your image will be responsive.

2 Likes

Hi @avivtech
Thank you so much for your help.
You are right and I could make it responsive by setting 100% and removing max/min width.

However, what I want to achieve is to show half part of image in tablet screen. Is it possible?
What I want

And it looks like this now

of course :smiley:

You need to put the image in a div with overflow:hidden and the right dimentions, the position them both as you wish.
https://www.loom.com/share/346fc82412da415289881b189898860b

btw - dont use 100% on all the size properties. Once you give 100% width, all the other % are useless. Read here about it.

p.s. images max-width is automatically set to 100%. If you want the image to be larger then it’s parent, set it to more then 100% .

2 Likes

thank you so much! you are right.
video is very helpful :slight_smile:

1 Like