Streaming live at 10am (PST)

How to keep images from scrunching up?

Hello. Noob here and I’m trying to rebuild a Webflow website so I understand how it was built. Currently I have a page which contains two images, one of a pair of electric toothbrushes and a second FREE button that hovers over the toothbrushes. I created parent div and then added the toothbrushes with a position of static. I then added the second FREE image but set position to relative so that I could move it around relative to the toothbrushes. Finally, I rotated it using a transformation. The images look fine when I set the browser width to around 1500 pixels. But as I reduce the viewport’s width down to tablet width, instead of getting smaller, the two images remain the same size until the FREE button gets clipped off. Then both the images scrunch together into a narrow vertical line. What I would like to happen is that the two images get smaller as I narrow the width (as can be seen here) before disappearing entirely when I hit the tablet breakpoint. I know how to make them disappear at the tablet breakpoint but I don’t know how to position them so that they get smaller as I narrow the viewport width before reaching that tablet breakpoint. Thank you for your help!

Here is my site Read-Only:

1 Like

@robertfdev you have not added media queries until you create them responsive its not going to shrink also they are using columns instead of divs not a big deal if you make it responsive

Could the problem be that Webflow doesn’t have a set of responsive images? The image in question is a .png file I uploaded from my computer. But I’ve noticed that after doing the upload, there is only the original uploaded image in my Assets. Webflow says that when you upload, it will generate a set up responsive images. Is there a way to force Webflow to generate a set of responsive images for this image I uploaded? Thanks.