Slider on mobile

Hi,

Write below CSS rules into custom CSS editor:

@media only screen and (max-width: 479px){
.btn-lg, .btn-group-lg > .btn{
font-size: 11px !important;
padding: 3px !important;
margin-top: 5px;
}
.carousel-indicators {
display: none;
}
.carousel-caption{
top: 0px !important;
bottom: -12px !important;
}
.carousel-caption p{
font-size: 10px !important;
line-height: 13px;
}
.carousel-caption strong{
font-size: 13px !important;
line-height: 16px;
}
}

Save the changes.

Or if you want to remove slider caption then write below CSS rules

into Custom CSS box:

.carousel-caption{
display: none;
}

Save the changes.

Thanks

Despite being 8 months old, it also solved my problem. Carousel is displaying nicely in mobile but… Google Pagespeed still inform that:

The page content is 389 CSS pixels wide, but the viewport is only 375 CSS pixels wide. The following elements fall outside the viewport:
The element <div class="navbar-header"></div> falls outside the viewport.

The viewport problem was not related to the carousel.

I fixed it by eliminating some css rules with this custom css:

.navbar-toggle {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.navbar-header {
  margin-left: 0px !important;
  margin-right: 0px !important;

Pagespeed accepted it.

And I also changed the custom css from the first problem to this:

@media only screen and (max-width: 767px){
.btn-lg, .btn-group-lg > .btn{
font-size: 11px !important;
padding: 3px !important;
margin-top: 5px;
}
.carousel-indicators {
display: none;
}
.carousel-caption{
top: 5% !important;
bottom: 1% !important;
}
}

.carousel-caption{
top: 21% ;
bottom: 1% ;
}

It’s more responsive altough not perfect.