How to Best Fix Run Off Text on Mobile View

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.

• This topic was modified 6 years, 6 months ago by Andrew Nevins.
• This topic was modified 6 years, 6 months ago by Steven Stern (sterndata).

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