Streaming live at 10am (PST)

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.

1 Like

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.

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% .

1 Like

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

1 Like