Home Forums WoodMart support forum Help needed with responsive slider height in Woodmart theme WordPress

Help needed with responsive slider height in Woodmart theme WordPress

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #670362

    alifhossain5577
    Participant

    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 ago by alifhossain5577. Reason: forgot to add content,
    #670489

    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,

    #670492

    alifhossain5577
    Participant

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

    #670623

    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,

    #670641

    alifhossain5577
    Participant

    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.

    #670787

    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,

    #670788

    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,

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)