Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24002

    Hi there…

    I have to say that my website is coming along nicely and ive learnt so much. Using a class ive managed to install Bebas and call it up on a page block as well as have it scale as required responsively. Brilliant!!!

    Pushing it further I wonder if its relatively straight forward to implement ‘hidden’ line breaks that dont kick until a screen is certain sizes. I have a heading that is big & chunky. Looks great on big screens but as its on one line it loses impact on small screens – It needs splitting on to several lines.

    Ive attached a clipular link of what im after.

    http://www.clipular.com/c?6544137=EVx8AxkV9VIetmvq_Fe2CK_cZBM&f=4970845d4c8ac5ae94a7b8ee6dd23291

    Cheers

    Andy

    #121954

    Hi,

    Give a special class to the br tag. Then use media queries to display it to a certain screen width and hide it on another. Something like this

    Click here to add your own text<br class="br-nodisplay" />Text here.

    If you want to hide it on mobile view. You can add this on your custom.css.

    @media only screen and (max-width: 767px) {
    .br-nodisplay {
    display: none !important;
    }
    }

    Regards,

    Ismael

    #121955

    Brilliant Ismael – as always

    Thankyou

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Responsive Text Scaling – Hidden line breaks’ is closed to new replies.