Home › Forums › WoodMart support forum › How Do You Make a Fully Responsive Hero Image Slider Without Fixed Heights

How Do You Make a Fully Responsive Hero Image Slider Without Fixed Heights

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 28, 2025 at 1:37 pm #670218

    alifhossain5577
    Participant

    I’m using 3 images for my hero section. No text.

    What I want:
    When screen size decreases, the image should shrink.
    The height should auto-adjust so the full image always shows.
    This should work on all screen sizes, not just Desktop/Tablet/Mobile presets.

    Problem:
    In WordPress (Woodmart), I only see the option to pick 3 images for 3 breakpoints.
    This isn’t truly responsive.
    If I set background-size: contain, the image scales, but the slider height stays fixed.
    There is no “auto height” or “contain height” setting.

    Question:
    How do you make a hero slider that:
    Shows the full image without cropping
    Scales proportionally
    Automatically changes height on all screens
    Without having to set fixed heights everywhere

    Any simple solution for this?

    One more issue: there’s extra space showing between the header and the hero section slider. I don’t see any padding or margin set in the hero section container. How can I remove this?

    June 29, 2025 at 7:53 pm #670359

    alifhossain5577
    Participant

    nobody there to reply?

    June 30, 2025 at 9:34 am #670445

    Luke Nielsen
    Keymaster

    Hello,

    The “Cover” size for the bg image can cut some parts of the image. So this is not something caused by our theme, that CSS property works in such a way.

    cover
Scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is: both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.

    Here you can check each bg image size – https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    If you want to show a full image without cropping, show the image via the Image element (not as a background), so remove the images that you defined for the background, edit the slider via page builder and define the image via the element. Then recheck the issue and let me know.

    Kind Regards

    June 30, 2025 at 3:22 pm #670609

    alifhossain5577
    Participant

    Hi, Thank you for replying. please check the video attached to this reply and guide me through this! very much appreciate the help

    June 30, 2025 at 5:43 pm #670678

    Luke Nielsen
    Keymaster

    Sorry for the misunderstanding. Our theme slider is created to be used similar to the Revolution Slider where background image (color, gradient, photo, image pattern) and slider content (text and buttons) are separate layers where slide background is set via Slider background options (https://prnt.sc/0jcMZRd2hqim) and slide content text and buttons is created via Elementor builder text and buttons elements (https://prnt.sc/GKzAkydodQae). As an example, you can check the following demo page (https://woodmart.xtemos.com/demo-retail/demo/retail/).

    If you use pre-created images in a graphic editor that already contain text and buttons, then they cannot be used as a background for slides, because at certain resolutions the aspect ratio of the screen may not match the ratio of the size of the slider and the screen of the device and the text on the image can be cut. The following issue cannot be fixed because it is the default behavior of the CSS background property.

    For such images, we do not recommend using the Revolution Slider or Woodmart Slider, but use a simple image carousel (https://woodmart.xtemos.com/images-gallery/) or banner carousel (https://woodmart.xtemos.com/banners/) elements.

    Kind Regards

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)