Help needed with responsive slider height in Woodmart theme WordPress

[alifhossain5577]

I’m using the Woodmart child theme (WordPress + Elementor) and have a full-width slider/carousel at the top of my homepage.

I need to:
Desktop height: 450px
Mobile height: 360px
Responsive intermediate heights in between

I need similiar effect on the slider like https://shop.shajgoj.com/. where when I shrink the width/screen the hero image/slides also fits the screen, the width doesn’t get cropped. sadly, I don’t have this option in my woodmart theme, I can not make the height of the slider auto, i can make it minimum 100px.. but it doesn’t make it responsive!

any way to do this editing css/javscript?

• This topic was modified 1 month, 3 weeks ago by alifhossain5577. Reason: forgot to add content,

Hello,

You can adjust the slider height from Slides > Sliders > Edit the Slider.

Reduce the Slide Height as needed for Desktop and Mobile.

Please refer to this screenshot: https://snipboard.io/UHLEMv.jpg

If you have any questions, feel free to contact us.

Best Regards,

[alifhossain5577]

but then my image width decreases, i dont want that. could you please check the private content I have shared before?

• This reply was modified 1 month, 3 weeks ago by alifhossain5577.

Hello,

You are using images in a slide. It is best to use different image sizes for desktop/tablet and mobile.

You can adjust more settings by following these steps:

Navigate to Slides > Edit Slide.

Scroll down to the bottom of the slide editor.

Check the Slide Settings section, where you can configure different images for various devices and set their position: https://ibb.co/9bpLVTr

Best Regards,

That page doesn’t exist
The requested page was not found.

could you please check on it? also I don’t think how I want to do it is possible with woodmart alone, if you can guide me through customizing it using code I would really appreciate it. I tried creating a custom.js file and tried modifying the fixed width 450px for desktop, and setting it to auto. but sadly it only sets the height auto for less than a second and goes back to 450px. Please, help me on this part.

Hello,

You’re currently using images within a slide, and 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.

Hope this Helps!

Best Regards,

Hello,

You’re currently using images within a slide, and 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.

Hope this Helps!

Best Regards,

[Author]

Posts