Responsive images in sliders

Design help General
1

I am super confused with dealing with responsive images. I read in other post that if we set the image to percentage and not pixels, the images would be responsive… But it didn’t work for me…

My website
http://www.sheishelen.com/

My images are in a slider and uploaded as background.
Even if I have adjusted the slider size, the images are not responsive… So what do you need to do? Do I need to crop every image for tablet and mobile? But would that overwrite the original desktop image?

Please help!

2

Try setting the background images to “cover” Make sure the slider has a class assigned to them and set the width of the slider component to width: 100%.

If you need additional help please share a public link to your site so that others can view the settings you are using and offer advice.

4

Hi! Thank you for getting back to me. that worked. But the images are cut off to the right edge. how do i fix that?

5

Please share a link to your site so that people can help you and understand specific issues you may be having:

6

Hi @sheishelen, thanks for your post and feedback thus far. When you are using the cover option, the image will zoom when the browser viewport is larger than the image being used as a background. When the browser viewport is smaller than the image, the image will get cropped.

If you can share the read-only link to your site: ​Learn web design with free video courses and tutorials | Webflow University, and let us know which slider on the page is having the issues, we can take a further look :slight_smile: Cheers, Dave

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.