How to Best Fix Run Off Text on Mobile View

  • Resolved thementalupdate

    (@thementalupdate)


    6 years, 6 months ago

    Hello,

    I am having trouble setting my mobile view to fit correctly for all browsers. When I edit it on the WordPress the mobile view looks great, but when I look at it on my phone (Samsung browser) the titles of the forum page is cut off. The some titles are cutting off mid-word and finish the word on the next line. Is there any code that could fix the titles so the do not cut off mid-word, as to keep a whole word on each line?

    Is it best to fix font size or adjust the margins? I am not what fix will work best universally for different platforms / browsers.

    I have some custom CSS to help adjust my mobile view for reading:

    .wrap {
    max-width: 85%;
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 85%;
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 85%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 85%;
    }
    }
    @media screen and (min-width: 768px) {
    .has-sidebar #secondary {
    width: 20%;
    }

    .site-info { display: none; }}

    Please let me know if you have any ideas. I appreciate any advice you can offer! If it would help I have a screenshot of the problem I can email. Just let me know.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If you don’t break the word mid-word, you end up with text overlapping one another. What do you want to do about that instead? For example:

    

#page {
    word-wrap: unset;
}
    Thread Starter thementalupdate

    (@thementalupdate)

    Thank you Andrew. Do you think the best way to fix this is a to adjust the font sizing based on the platform it is viewed on? Or a way to fix the margin for just the mobile forum page so more text can fit within the component?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes if it’s the bit of text I think you’re referring to, try this:

    
#bbpress-forums ul.forum-titles li.bbp-topic-voice-count,
#bbpress-forums ul.forum-titles li.bbp-topic-reply-count,
#bbpress-forums ul.forum-titles li.bbp-topic-freshness {
    font-size: 13px;
}
    Thread Starter thementalupdate

    (@thementalupdate)

    Thank you! I used the bbpress styling tool plugin to edit the font size. I just learned how to make mobile only edits!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to Best Fix Run Off Text on Mobile View’ is closed to new replies.