Panel Title Not Wrapping on Mobile

  • We set the page/panel title (H2 entry title) to 40px using CSS. When viewing the home page on a mobile phone, the titles for the panels are not wrapping. Instead they extend off the screen. All other text and headings are mobile responsive. Is there something we can input into CSS to make sure the page/panel titles wrap on mobile devices?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi there,

    Rather than change the font size on mobile I think it will be easier if you remove this bit of custom CSS you have added:

    .pique-panel-content h2.entry-title {
    white-space: nowrap;
}

    This CSS causes the title to not wrap, which is why it runs off the right side of the page. If you remove that your titles will wrap on smaller screens so the font size stays the same, but the title is able to be displayed on two lines instead of one.

    Hope that helps!

    Thread Starter mkrei

    (@mkrei)

    Thank you. I don’t know why that CSS was in there but glad that solved the problem.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Panel Title Not Wrapping on Mobile’ is closed to new replies.