Integral Pro – responsive text

  • I cannot work out how to make the h1 text in the Welcome section responsive for mobiles. I have tried some of the css text given in other replies on this forum but nothing has worked. Please help. Thanks, Annie

    Hello Annie,

    It is already responsive, however the issue may be the amount of text you have or long words which are not breaking to the next line.

    Can you send me a link to your website so I can have a look?

    Hi – website is wwww.eastcottdrinks.co.uk. It is ‘Eastcott’ which is the problem – I guess too long? I would like it to shrink so that it fits onto one line, on a mobile view. Thanks

    *sorry, website should be http://www.eastcottdrinks.co.uk

    Hello Annie,

    In your Admin Dashboard go to the Custom CSS field of the Custom Code section in Integral Options panel and enter the following CSS code,

    @media (max-width: 767px)
    .h1, .h2, .h3, h1, h2, h3, h4 {
    word-wrap: none;
    }

    That should do what you need.

    Hi – this didn’t quite work but switching ‘none’ for ‘unset’ seemed to >
    @media (max-width: 767px) {.h1, .h2, .h3, h1, h2, h3, h4 {word-wrap: unset;}
    I hope this is OK?

    Hi Hans – I’ve realised that on very small screens the above solution doesn’t work either. with:
    {word-wrap:none;} nothing happened, with {word-wrap:unset;} the words don’t wrap but some of the text disappears

    Hello Annie,

    In that case you will need to lower the size of the text for smaller screens sizes.

    Try,

    @media (max-width: 480px) {
    .hero h1 {font-size: 3.429rem !important;}

    .hero h2 {font-size: 2rem !important;}
    }

    You can lower the font size to what works for you.

    Thank you, that worked perfectly.

You must be logged in to reply to this topic.