Trying to fix line breaks on mobile version of Atmosphere Front Page 2 widget

[Doug]

The issue is the second Front Page section on this page (Front Page 2). The one with the "Genesis - Featured Posts" widget showing my most recent blog post.

Home

I think it looks ok on the desktop version, but the line breaks on mobile are bad, as this screen grab on Google Photos shows.

https://goo.gl/photos/isbNp4FDG13RCPJW9

I've done a bit of hacking on the Front Page 2 section, as I was advised that that section isn't really designed for the Featured Content widget (though I'm not sure how to tell which widgets are designed for which Front Page sections, as I haven't seen any indicators).

To modify the Front Page 2 section for the "Genesis - Featured Posts" widget, I added the following code to the style-front.css file.

<--begin code sample-->

.front-page-2 .featured-content .entry {
margin-bottom: 0;
padding-bottom: 0;
}

.front-page-2 .flexible-widgets .widget{
margin-bottom: 0;
}

<--end code sample-->

If there's a better content display widget for mobile, I'm fine with using that. Or modifying this to display better on mobile. (If the image were the full width of the mobile browser and then the headline running side to side, it should look fine. I just don't know how to do that.

Thanks for any input.

http://dougschumacher.com/

[Victor Font]

In style.css at line 988 you have word-wrap set to break-word for widgets. Change this to normal.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Doug]

Victor,

Thanks for the note.

I tried changing that code to your suggestion, but it's still breaking the words.

https://goo.gl/photos/mim9sVhL8e4rTVdP9

I'm hoping to get the photo to scale to full width, and the headline align left below it. Like this, only if the headline and image positions are switched, that's fine.
https://goo.gl/photos/mim9sVhL8e4rTVdP9

The new code I have in there is:

.widget {
word-wrap: normal;
}

But it didn't seem to change how it was presented.

For reference, here's the page in question -- it's the mobile browser view I'm trying to correct.

Home

Thanks for any additional input.

[Author]

Posts