Sides of image gets cropped off in slider on tablet views and below

Hi all,

See my simple test site: https://preview.webflow.com/preview/portfolio-45358d-5b968e20e6c0cf2c081b7a?preview=f9113f0fc3054a17577efb7e46226f91

On desktop view, it looks fine.
On tablet view, the sides of the image gets chopped off.

I tried playing with different settings for the background image but in vain.

What I want is for tablet and phone views, the slider should auto adjust it’s width and height so that it shrinks down, instead of the image being cropped off.

I read somewhere we can probably use a DIV instead of sliders, but DIV do not have all that slider functionality, and it’s gonna be really messy to do all that JS and stuff.

This is for a work portfolio so I can’t afford to have sides cropped like this.

Is there a simple way around this? Tks!

Change slider max-height to 60vw instead of fixed 768px

1 Like

Thanks Sam. Will try it when I’m home.
Just wondering, is there a typo in your post? Height units should be vh and not vw, right? Tks once again! :grinning:

No, it’s correct. You want to restrict the height based on the width of the viewport.

1 Like

Aamazing, Sam! I learnt a wonderful new trick today! Tks! :grinning:

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