Neaten content -- different widget or CSS change?

Question

I want to neaten up the content in a widget. I'm not sure if I should use a different widget, or get a change to the CSS made, or something else...

On a largish screen on this site: http://richardclunan.com/

…on the right-hand side, the section "From my Inbox" -- that's a Text widget.

On a largish screen, the lines of text look too long. I'd like to make the line-length shorter than the text fields above them.

(On a smaller screen, the widget pops down to the bottom of the site, and the lines are shorter than the text fields above them -- it looks neater this way.)

Is there a different widget I can use to neaten that up? Or do I need to make a CSS change for this?

Answer 1

You could add this to your CSS:

div.textwidget {
    max-width: 250px;
}

You would probably want to make sure that's above your media query rules so that it doesn't affect the formatting of your page on smaller screens.

---

I used Chrome's developer console to find out how wide the text inputs are and to find the class of the widget that you wanted to change. You can learn more about Chrome DevTools here.