Optimization Issues on PC, Mobile, and Tablet Versions

We are currently using two different main images for the site’s HOME page—one for the PC version and one for the mobile version. However, there’s an issue with the image size optimization. Depending on the screen size, the space between the “PERFECT PAIRINGS” text and the bottom of the image becomes inconsistent, sometimes appearing too wide or too narrow. Could you help optimize this so that the white space below the main HOME image is minimized and stays consistent across different screen sizes?

Additionally, when viewing the PC version of the HOME image on a tablet, the top part of the image is cut off and not fully visible. Could you please provide guidance on how to fix this?

Attachments:

You must be logged in to view attached files.

Hello,

As we can see, you are using slider for the images and set them as backgrounds. You need to use either Banners carousel or simple images to keep the images aspect ratio and correct spacings across all resolutions.

Kind Regards

We are beginners and would appreciate your help. Could you please provide detailed instructions on how to apply the Banners Carousel, along with screenshots?

Thank you for your support.

Hello,

To apply the Banners Carousel and optimize your images for different screen sizes, please follow these steps:

1. Open your Home page in Elementor.
2. Add the Banners Carousel element. You can find this by searching for “Banner” in the elements panel.
3. Configure the Banners Carousel by adding your images (one for PC and one for mobile).
4. Adjust the spacing, aspect ratio, and responsive settings within the carousel options to ensure that the white space is consistent across all screen sizes.
5. Save and preview your changes to check how the images and spacing look on different devices.

Kind Regards

As per your instructions, the changes were successfully applied to the PC version. However, I am unable to find a way to upload a separate image for the mobile version. Could you kindly guide me through the process, assuming I’m a beginner? A step-by-step explanation with screenshots would be greatly appreciated.

Attachments:

You must be logged in to view attached files.

There is no option to upload different images to the banners on mobile and desktop devices. But you can create two different carousels with different images. One should be hidden on desktop and another on mobile. Let me know if it works for you.

Thank you so much for your help. Could you please guide me on how I can hide the carousel on either PC or mobile? Thank you

Hello,

Try to use the Responsive options provided in the Container settings here – https://take.ms/lGStfU

Thank you for your time.

Kind Regards

[Author]

Posts