Hello wm,
Correct me if i’m wrong, did you meant you want to make the title text responsive and smaller font size in mobile screens? That is actually a good suggestion. For now you can easily implement it by adding something like this into your theme’s style.css:
@media (max-width: 400px) { /*** Change 400 to the screen width you want ***/
.cycloneslider-template-default .cycloneslider-caption-title{
font-size: 12px; /*** Change font size to what you want ***/
}
.cycloneslider-template-default .cycloneslider-caption-description{
font-size: 10px; /*** Change font size to what you want ***/
}
}
Hope this helps
Thread Starter
Piani
(@webbmasterpianise)
Exactly what I was looking for! Thanks for fast fix and hope to see it in coming update.
PS! With the border I ment the “gray” area where this text is displayed. and the fix will not affect that height. But the text/fonts is responsive now.
Try reducing the paddings:
@media (max-width: 400px) { /*** Change 400 to the screen width you want ***/
.cycloneslider-template-default .cycloneslider-caption-title{
font-size: 12px; /*** Change font size to what you want ***/
padding: 5px 10px 5px 10px;
}
.cycloneslider-template-default .cycloneslider-caption-description{
font-size: 10px; /*** Change font size to what you want ***/
padding: 0 10px 5px 10px;
}
}
How small is your screen? Try reducing the paddings further until you arrived at the size you want.
Thread Starter
Piani
(@webbmasterpianise)
Works perfectly. I use these settings. Thanks again!
@media (max-width: 300px) { /*** Change 400 to the screen width you want ***/
.cycloneslider-template-default .cycloneslider-caption-title{
font-size: 8px; /*** Change font size to what you want ***/
padding: 3px 10px 3px 10px;
}
.cycloneslider-template-default .cycloneslider-caption-description{
font-size: 6px; /*** Change font size to what you want ***/
padding: 0 10px 3px 10px;
}
}
