Navigation
Archive / Blog: Long Headlines get cut
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • March 7, 2017 at 2:31 am #1397369
    imageforyou
    Participant

    Hi,

    long headlines get cut on mobile. Please see screenshot. How can make them responsive?
    Example URL: http://www.gypsygalweddings.de/wie-mache-ich-ihm-einen-antrag/

    Thank you.

    March 7, 2017 at 4:37 am #1397508
    Jade
    Moderator

    Hi there,

    Please add this code in the customizer:

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    word-break: break-all;
}

    Hope this helps.

    March 7, 2017 at 4:37 am #1397509
    Jade
    Moderator

    Hi there,

    Please add this code in the customizer:

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    word-break: break-all;
}

    Hope this helps.

    March 8, 2017 at 10:36 am #1399259
    imageforyou
    Participant

    Hi, thank you.

    Well… now even the custom headlines which were OK before, are ugly now 😉
    Please see before/after screenshots. Thank you.

    March 8, 2017 at 11:23 am #1399352
    Nabeel A
    Moderator

    Hi again,

    Try replacing the previous code with the following code:

    @media screen and (max-width: 480px) {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: 140%;
}
}

    Let us know how this goes!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1397369 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>