Adjust Slideshow in mobile views

cytropics

Hi,
Please help! A part of the slideshow is hidden on mobile and tablet views.

Thanks.

Joshua-M

Hi,

Try to add the following custom css code:

@media (max-width: 780px) {
    .acm-slideshow .owl-carousel .item .img-bg {
    height: 400px;
    width: auto;
    object-fit: cover;
}
}

cytropics

Joshua-M
Hi thanks for response. Okay, I added the above css, didn't work.

aman204

cytropics Kindly check now. Have added this media query CSS along with changing some of declaration :

@media only screen and (max-width: 780px) {.acm-slideshow .owl-carousel .item .img-bg {height: auto !important;width: auto !important;object-fit: cover;}
  .acm-slideshow .owl-carousel .slider-content{top:20%;}
  .acm-slideshow .owl-carousel .slider-content .slider-content-inner > h1{font-size:18px !important;line-height: 20px !important;}
  .acm-slideshow .owl-carousel .slider-content .slider-content-inner > p{font-size:12px !important;}
}

Kindly ensure to clear your browser cache if changes dont reflect

cytropics

aman204

Somehow part of the slideshow is hidden under the main nav.

Ninja

cytropics
Hi
The screen height is not enough to show all the information..
Add this code in custom.css file to move the slideshow content down


@media(max-width:768px) {
.acm-slideshow .owl-carousel .slider-content .slider-content-inner > h1 {font-size: 20px!important;}
.acm-slideshow .owl-carousel .slider-content {bottom: -45px!important;}
.acm-slideshow .owl-carousel .slider-content .slider-content-inner > p {font-size: 15px!important;} }

You can adjust the font size values as per needs.

Regards

cytropics

Ninja

Hi,

It is not showing well. The buttons have now disappeared. Could you check it on the site please?

Thanks

Ninja

cytropics
Hii
If you want to show the button you need to change the value of bottom : -45px in the code
The space is not enough in mobile to show everything, either you can hide the text and show only button in mobile or use it as its before.

Regards