White Space Below Slider Mobile & Responsive


#1

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!


#2

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


#3

Worked PERFECTLY

Thank you!


#4

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