Custom text issue in mobile view

[Thiswonderfullife]

Hello,
I have a custom text which is from your Murphy Bed & Breakfast Template. It looks great on my laptop but on my mobile I cannot read the headlines in full, see attached screenshot from my smartphone:

How can I make the text smaller (font size) in order to read the full headlines on the smartphone?

I will provide my login in a secure note.

Thank you!
Vivien

[tristup]

Hi Viven,

Thanks for reaching out.
To adjust the font size of the title and subtitle on a smaller screen you need to add the following custom CSS code into the Theme Options > CSS.

@media (max-width: 480px)
{
    .x-bnb-image-grid  a  div  span, 
    .x-bnb-image-grid a div  small  
    {
        font-size: 12px;
        overflow: unset;
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks