Slider Responsive Sizing

Hello. I want my slider to have a specific max width and height (1920x734), and then I want it to automatically scale down for smaller window sizes. I can’t seem to figure this out, it’s either too big, too small, or it’s the perfect size but doesn’t scale. The height doesn’t even necessarily need to scale, but the width does.

I want to have a background image (of the specified size), and a few elements on top of it, such as text and a PNG(s) that I could possibly animate. I basically want it to look like the image below, with the text and logo separate from the background. If I can figure this out then I can make other slides with the same idea.

In the context of a whole page, like this.

One other thing is that if I just set it to be 100vw, it looks bad on my monitors, because the image is designed for 1920x1080 resolutions, but I’m using a 4K monitor and a 1440p monitor, so I’d always be seeing my own site with low quality images stretched across the screen. That’s more of a personal issue I guess.

Any help is much appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Xiox

in the desktop layout you should use your desired width and set it.
then in the smaller breakpoints your should set the width/height to auto and set desired max size for width and height.

That should take care of it.

alternatively, you can also use vw/vh units and then the slider should be responsive regardless of the breakpoint…