Slider images cutting on devices & need separate mobile banner option
-
Hi, I am facing an issue with the homepage banner slider. The slide images are getting cut on different devices like tablets and mobiles. The slider is not maintaining full image visibility across responsive breakpoints. I want to know how to add separate mobile-dimension images for the same banner slider so the layout stays consistent. Please guide with the correct settings or custom code to fix this. Thank you.
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,
Hello Team,
Thank you for the detailed explanation.
However, even after uploading a separate mobile banner, the correct mobile banner is still not showing on mobile devices. It continues to display the desktop version instead.
Also, please check the desktop banner, as it is still getting cropped on different screen sizes.
In a separate query —
Could you please guide us on how we can reduce the font size of the product title on the product page? A small CSS snippet or the exact theme option path would be very helpful.
.
