Solved Templates

slideshow text not displaying properly on mobile

Asked by Dina Abramson 4 years ago Last activity 4 years ago

Hi,

The text portion of the slideshow is displaying to far to the right and is not readable on mobile. How do I move that further to the left for mobile only.

I've included an image

https://awdtest4.com/images/slider_mobile.jpg

Any assistance is appreciated.

Accepted answer

Marked as the solution
Dina Abramson Asked this
4 years ago

Beautiful, thank you so much

2 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago · edited

Hi

Thanks for contacting us. Use this CSS 

@media (max-width: 767px){
    .sp-slider #sp-slider-item-1653228190453-num-0-key #sp-slider-inner-item-1653228190454-num-0-key{
         white-space:nowrap;
    margin:0px 0px 0px 50px!important;
    padding:0px !important;
    text-align:center !important; 
    }
.sp-slider #sp-slider-item-1653228190453-num-0-key #sp-slider-inner-item-1653228190454-num-1-key {
font-size:17px !important;
    white-space:nowrap;
    margin:0px 0px 0px 20px!important;
    padding:0px !important;
    position:relative;
    right:30px;
    text-align:center !important;
}
    .sp-slider #sp-slider-item-1653228190453-num-0-key #sp-slider-inner-item-1653228190454-num-2-key{
        font-size:17px !important;
    margin:0px 0px 0px 0px!important;
    padding:0px !important;
    text-align:center !important;
    }
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

-Regards.

Mehtaz Afsana Borsha Staff
4 years ago

You are most welcome. You should accept my answer as its the solution for this post.

Log in to reply.