White Space Below Slider Mobile & Responsive

Hi all,

I have implemented CSS to ensure my homepage slider does not zoom on mobile devices. However, no I have a large white space below the slider which I am unable to get rid of.

This is the code I have added to Custom CSS.

@media only screen and (max-width: 480px) {
.slides-container .slide-item {
height: 300px !important;
}
}

Any help of this matterwould be much appreciated.

Thanks!

Hi,

Please try this Custom CSS to change the height of the slides to 300px on mobile:

@media only screen and (max-width: 480px) {
.slides-container .slide-item {
height: 300px !important;
}

.header-slider {
    height: 300px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba

Worked PERFECTLY

Thank you!

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba