Adapt Main Slider Size for Mobile

[Michele Ceccato]

Hello,
in my site (https://www.istitutomusicalebassano.it/) I use a Main Slider with one image. On PCs I can see the full image, but on mobile I see only a piece of that image.
How can I manage to automatically adapt the slider sizes on mobile so I can see the full image? In other words I want that on mobile the width of slider matches with the 100% of the width of mobile screen.

Thanks.

[themearile]

Hi Michele

Please add the below css code in the Additional css box to the responsive slider in the mobile view. Please go to the Appearance => Customize => Additional CSS then paste the CSS here and click to Publish button.

@media (max-width: 500px){
#theme-main-slider .item {
background-repeat: no-repeat;
height: auto !important;
}
#theme-main-slider .item {
padding-top: 80.56%;
display: block;
height: 0;
}
}

Let us know if it works.

Thanks

[Michele Ceccato]

Yes, it works!
Thank you.

[Author]

Posts