Slide appears shrieked on mobile site

On my published site, my slider on landscape mode is smaller than it is on the designer mode. Any solutions?


Here is my site Read-Only:

https://preview.webflow.com/preview/karasu-prototype-morrigan?utm_medium=preview_link&utm_source=designer&utm_content=karasu-prototype-morrigan&preview=ba14baf740d9c6a85a1500de3b3440a3&workflow=preview

Hi there,

When your published site appears different from the Designer view, there are a few troubleshooting steps you can take:

The first step is to unpublish and republish your site from your site settings. You can follow the detailed steps in our troubleshooting guide. If differences persist, try clearing your browser cache.

For slider-specific issues, you can adjust the size by selecting the Slider element and modifying its height in the Styles Panel. Consider using viewport height (vh) units for better responsive design across different screen sizes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

Yeah, I still need help. I’ve already tried that out.

I can’t tell because it looks like you’re playing with the image height while I’m looking at your project- but you have an image height specified in vh and you also have a slider height.

Since you have text inside of your images, and probably don’t want image distortion, I’d probably try to work with aspect ratios instead so that the slider can scale correctly.

Either that or redesign it so that the text is not part of the image, and then you can use object-fit: cover on the image to ensure it doesn’t distort.

Weird thing is that even when I change the height on design mode period, it refuses to change in the published site. It only affects the landscape mode. No other mode dose it strangely.

You might be looking at cached data in your browser?

I got it figured out. It was that. Thanks!