change title size on slider on the mobile version

Activello
1

the title on slider on the mobile version is too big, it would not fit within the whole title. Title size in slider is perfect for desktop, I want to keep desktop version slider that way. But can I adjust only the phone slider to make title tiny so it will fit onto the image?

This is a followed up question from this thread

Many thanks

2

Hi @dailysurprises,

Thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

@media (max-width: 768px){
#page .flex-caption {
    display: block;
    font-size: 75%;
}
#page h2.entry-title{
    font-size: 22px;
}
}

Best Regards,
Movin

3

Hi Movin

It does not work, title is still perfect for desktop and tablet but too big for mobile.

Screenshot attached.

4

It is working fine on my test site.

You can adjust the font-size in the above code to whatever you want to set for mobile devices.

Could you please share me your site URL where you are using the provided CSS code so that i can troubleshoot it?

5

Happy New Year Movin

Thanks for getting back to me. My website is http://www.dailysurprises.co.uk/

Below is the CSS code I am using.

div#logo {
padding: 10px 0;
}

<?php
echo do_shortcode("[metaslider id=39]");
?>

.entry-content ul, .entry-content ol {
font-size: 16px;
}

#page .flex-caption {
display: block;
}

@media (max-width: 768px){
#page .flex-caption {
display: block;
font-size: 75%;
}

#page h2.entry-title{
font-size: 22px;
}
}

6

Happy New Year…!!!

Thank you for sharing your site URL.

Please try using the below CSS code removing the above shared CSS code.

@media (max-width: 768px){
#page .flex-caption {
    display: block;
    font-size: 75%;
    bottom: 0;
}
#page .flex-caption h2.entry-title{
    font-size: 15px;
}
}