Responsive issues with slides

I’m reaching out because we are having responsiveness issues with our slides.

We are building the site with Elementor Pro (licensed version). Our slides are only images, and on the homepage we have three separate modules: one for desktop, one for tablets, and one for mobile — with display conditions based on the device.

The issue appears on tablets and also on larger desktop screens:

We cannot find a size, proportion, or configuration that adjusts the image correctly to the device.

On tablets, we tried using the elongated images we use for desktop, but they don’t display properly across several of the most common tablet devices.

We also tried using the wider images we have for mobile (which display well on mobile devices) for tablets, but those also have display problems on widely used tablets.

We tested the site with https://responsivetesttool.com/ and, as you can see, on some tablets the image displays correctly but on others the banner gets “cut off” and does not display the full content.

I’m attaching an example of:

A “desktop” elongated banner (currently used for desktop)

A “mobile” wide banner (currently used for mobile, displays fine there) — which we are testing for tablets, but it has similar problems.

Main question:
Is there a global solution we can apply so that the uploaded image automatically resizes correctly without being “cropped”? We understand it’s not possible to cover every existing screen size, but we want to make sure it works on the most common devices used by our audience.

For desktop, we believe we’ve mostly solved the problem, but on very wide screens the banner still gets cropped, and for example, the text at the bottom of the image isn’t visible.

Thank you in advance for your guidance.

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
https://postimg.cc/PCSYPR1k

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

Best Regards

[Author]

Posts