How to fix line break issue for mobile display of Genesis – Featured Posts

[Doug]

I'm using Atmosphere Pro with the Genesis - Featured Posts widget in my Home Page 2 slot, which features my latest post.

It looks good on the desktop, but when viewed in mobile, I keep getting very odd text wrappings for whatever headline is entered. See screen grab:
https://photos.app.goo.gl/ZBp7wqUsVcyGhBuT8

I guess the best solution would be to force-wrap the text, which should look fine, for only the mobile view? I've looked at this with Inspect, but frankly don't have much sense of what I'm looking at, or if this is even doable. I see something in Inspect called text-decoration, but that doesn't seem right. Or the h4 class 'entry-title'; but I don't want to change this globally.

Any suggestions greatly appreciated.

doug

https://dougschumacher.com

[Brad Dalton]

What you can try is wrapping your CSS rules to modify the text in a media query so it only renders at a specific screen width for mobiles.

---

Tutorials for StudioPress Themes.

[Doug]

Thanks, Brad. Hadn't known of the media query approach.

I'm working out something like this:

@media screen and (min-width: 600px) {
  div {
    word-wrap: break-word;
  }
}

I've read that 600px is a good breakpoint for mobile.

Re: word-wrap. I've also seen the line-break css property, but haven't found a good explanation of how that works. I've also seen the <br> element suggested.

Do you know if it's possible to tie it to a specific widget? Otherwise, I'm concerned about tweaking this on a site-wide level.

Thanks for any input on this.
doug

[Brad Dalton]

1. You could use something like .front-page-2 or .front-page-2 .featured-content as your div

2. Another option is to use the widget id however the 1st method is better.

---

Tutorials for StudioPress Themes.

[Doug]

Super. Totally makes sense. Thanks!

[Author]

Posts