Slider in my template/layout

I inserted a slider (rev slider) in my site: https://cai**.afro**.com/

But when you resize the screen, the height stays the same, but the section below the slider gets pushed down, so on mobile for instance it's pushed down quite a bit. How can I solve this?

Also, after these changes, but layout doesn't look as it was, how can I get it back? Please check the image below.

https://monosnap.com/file/6gc4bPYKc7EYvGlcun0sIYSKn0LyTb

  • Predrag Dubajic

    Hi VMK,

    Hope you're doing well.

    It seems that the slider itself is getting a higher size than needed and there's a lot of empty space in it.

    I'm not much familiar with RevSlider functionality and what could be causing this, but you can use CSS to modify the height depending on the screen size.
    It will require quite a few media queries defined but something like this should do the trick:

    @media all and (max-width: 1500px) and (min-width: 1200px) {
        #rev_slider_1_1_wrapper {
            height: 360px!important;
        }
    }
    
    @media all and (max-width: 1199px) and (min-width: 1080px) {
        #rev_slider_1_1_wrapper {
            height: 280px!important;
        }
    }
    
    @media all and (max-width: 1079px) and (min-width: 880px) {
        #rev_slider_1_1_wrapper {
            height: 330px!important;
        }
    }
    
    @media all and (max-width: 879px) and (min-width: 700px) {
        #rev_slider_1_1_wrapper {
            height: 250px!important;
        }
    }
    
    @media all and (max-width: 699px) and (min-width: 500px) {
        #rev_slider_1_1_wrapper {
            height: 200px!important;
        }
    }
    
    @media all and (max-width: 499px) and (min-width: 350px) {
        #rev_slider_1_1_wrapper {
            height: 140px!important;
        }
    }
    
    @media only screen and (max-width: 360px) {
        #rev_slider_1_1_wrapper {
            height: 110px;
        }
    }

    About the section below the slider, I tried following chat but I must say I'm a bit confused on what exactly is the issue and how it should be looking.
    Could you give me a bit more information about this?

    Best regards,
    Predrag

  • VMK

    Hi Predrag

    Thank you for your support!

    There are three issues on my website.

    1. Theres a margin/ padding above the slider on other pages. It's fixed on the home page but not for the rest of the pages.
    Please find attached.

    Layout

    2. There are three columns on the 'Home Page' below the slider. I'd like to have them all the same width and height. Right now, it's not the case. Please find attached.

    3. There seems to be a padding or margin 'below' the slider on other pages (not the home page). Please find attached. I don't know why this is the case. Kindly assist.

    Thank you once again for your time and support. Much appreciated.

    Kind regards
    vmk

  • Predrag Dubajic

    Hi VMK,

    1. Theres a margin/ padding above the slider on other pages. It's fixed on the home page but not for the rest of the pages.

    I can't see this issue on any of your pages, did you perhaps solved this in the meantime?

    2. There are three columns on the 'Home Page' below the slider. I'd like to have them all the same width and height. Right now, it's not the case. Please find attached.

    I'm afraid that this also looks good on my end, all three columns are around 447 pixels on 1920 width screen.

    3. There seems to be a padding or margin 'below' the slider on other pages (not the home page). Please find attached. I don't know why this is the case. Kindly assist.

    This should be adjustable with CSS that I provided in my previous comment as the slider uses same ID on each page, and as I can see it does affect other pages, if I check your Academy page this is the difference with and without the CSS that you added:

    You can modify my above code to add more media queries and adjust the height for different screen sizes.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.