Slider not fully visible on different devices (desktopو laptop cropped, mobile)

Hi Woodmart team,

We’re having an issue with the slider on our website https://natseff.com
.
It looks perfect on desktop, but on laptops parts of the image get cropped, and on mobile only a small section of the slider is visible.

We’d like the slider to automatically adjust so the full image/content is visible on all screen sizes (responsive “fit/contain” behavior).

Please check the attached screenshots and video showing the issue.
Website: https://natseff.com

Theme: Woodmart
Builder: [Elementor]

Could you please advise how to fix this or the best slider settings/CSS to show the full image responsively?

Thanks in advance for your help!

Best regards,
Amir

Attachments:

You must be logged in to view attached files.

Hello,

To achieve better responsiveness, it’s recommended to use different image sizes for desktop, tablet, and mobile devices.

You can configure this by following these steps:

1. Navigate to Slides > All Slides and edit the slide you want to adjust.
2. Scroll down to the bottom of the slide editor.
3. In the Slide Settings section, you’ll find options to upload different images for various devices and adjust their positions accordingly: https://postimg.cc/nMxYz5WC

This ensures the slide looks visually correct and performs well across all screen sizes.

But if you do not want to upload a separate image, and want the background image to be shown in full without cropping, please go to: Slide > Edit Slide -> Background Settings (at the bottom) and set the Background Image Size option to “Contain”.

Best Regards,

Hi Woodmart Support,

Thanks for your reply earlier.
I’ve tried all of your suggested solutions — including uploading separate images for desktop, tablet, and mobile, and setting the background image size to “Contain” — but the issue still hasn’t been fixed.

You can check the website here: https://natseff.com

The problem is that on laptop screens, parts of the image are still cropped or go outside the visible area, and on mobile, only a small section of the slider is visible. The slider looks fine on large desktop screens, but not on smaller ones.

Could you please:

Visit my website and check the slider directly.

Let me know the exact reason this happens.

And if it can be fixed with custom CSS, please send me the exact CSS code (with correct selectors) that I can add to the theme’s “Additional CSS” section.

I’ve already checked all possible settings, but it still looks stretched and cropped on smaller screens.

Thank you very much for your help — I’d really appreciate it if you could check the live site and tell me the correct fix or CSS to make the slider image fully visible on all devices.

Best regards,
Amir

Hello,

I have further checked your site and your content is placed directly on the background image, and since the current image has a large width (1920px), it gets cropped on smaller laptop screens.

To improve the display, you can try uploading slider images with a minimum size of 1366×768 pixels.

Here is the documentation: https://xtemos.com/docs-cat/woodmart-slider/

Best Regards,

[Author]

Posts