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.

Hello Team,

Since the response was taking a little time and the site was already live, we temporarily hid the existing slides section on mobile and created a separate mobile image carousel to ensure the visuals look correct on mobile devices.

Could you please check this setup from your end and help us make sure everything looks perfect and follows best practices?
If there’s a better or recommended approach, please let us know so we can implement it accordingly.

Thank you!

Hello,

01. Navigate to Slides > Edit Slide and in the bottom of the slide settings, remove the background color and then check the slide on mobile: https://ibb.co/4gTV4PTs

02. Navigate to: Theme Settings > Typography > Advanced Typography
Create a new rule for the “Single page title” item >Adjust the font settings as needed.

For detailed instructions, please refer to the documentation: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards,

Hello Team,

Thank you for the update.

The second suggestion regarding the Single Page Title typography worked perfectly.

However, the first issue with the mobile slider is still the same. I removed the background color as suggested and tested again, but it didn’t fix the problem. Since the site was live, I had to hide that slider section for mobile dimensions once more and continue using the temporary mobile carousel.

Please recheck this issue and advise on a permanent fix, as the mobile banner still does not display correctly even after following the recommended steps.

Best Regards,

Hello,

Please try to update the new version of the theme “WOODMART WordPress NEW: 8.3.6 RELEASED”, update the required plugin, and check the issue: https://xtemos.com/docs-topic/update-the-theme/

If the issue remains, turn off all of the plugins not related to the theme, clear your site cache/ server cache, and check if the problem persists.

Best Regards,

[Author]

Posts