How to Fix Web Pages Where Text is Too Wide

The web is a wonderful place, but sometimes the pages don’t work for me. It’s not the content, but how they display. I’ll find a site where the text is very wide or even full screen. On some monitors, this works well. Other times, the width makes it harder to read the page. Your eyes have to span the full screen and it’s more tiring. But, with the use of your browser and a couple of tweaks, you can fix pages where the text is too wide.

Just to be clear, this isn’t a permanent solution. That would be great if you could change someone else’s site. However, the fix works until you refresh the page or go to another.

What we’re going to do is make 2 CSS changes to the page. The good news is that you don’t have to know CSS or be a developer. We’re going to use the built-in browser tools.

The screen snap below illustrates this problem. It’s a great blog post but the text takes up most of the screen width. I also saw this issue with a number of privacy policy pages. In those scenarios, I wonder if it’s intentional to make readers leave the page.

text too wide for page
Web page where text fills screen width

I could resize my browser window and have the page reflow. But, I prefer having my browser full-width. You may feel differently. Instead, I’ll change the width of the text area.

reduce element size
Reducing the text width area

Finding the Text Area to Change

The steps below should work for most browsers. For these steps, I’ll use Google Chrome. You should get similar results with Mozilla Firefox or Microsoft Edge. And if you want to send me a MacBook Air, I’ll test Apple Safari;-)

  1. Find a web page where you’d like to reduce the text width.
  2. On your browser, press Ctrl + Shift + I.
  3. This should open your browser’s Developer tools. The panel may open to the side or underneath the web page. Don’t worry about the details as I’ll step you through the process.

    Web page and Google Developer Tools
    Web page and Google Developer Tools
  4. On the Developer tools panel, click the Elements tab toward the top left. See (B) above.
  5. Click the Element Inspector button. It should be the first button. Or, you can press Ctrl + Shift + C.
  6. Elemt inspector button
    Click the Element Inspector
  7. Use your mouse and hover over your web page until the section you want to change turns blue. You should see the element’s name.
  8. When you’ve found your area, click it with the mouse.
  9. On the Elements pane, you should see an item highlighted. In my case, it’s “entry-content”.
  10. highlighted element
    Your element will be highlighted

    These element names may differ from site to site. The important part is you’ve targeted your area. And if you want to play around, you can click the names that show on the horizontal access (e.g #post-6526, #content, etc. ) to see how the area changes.

Making the Too Wide Text Narrower

The last part is adding a little bit of CSS.

  1. In the lower section of Developers tool make sure you’re on the Styles tab.
  2. element.style section
    Styles tab and active elememt
  3. Click right after element.style {
  4. A new line will appear underneath with a flashing colon and semi-colon.

  5. On this new line, type Width and press your Tab key. Type 55%.
  6. As you might guess, this text changes the element’s width. I chose 55% for this demo, but you can use other values.

  7. Press Enter.
    change element width
    Changing element width to 55%

    You should see the text narrow. However, let’s center the content.

  8. On the next line, type margin and press Tab. Type 0 auto.
  9. Press Enter.
  10. css lines for margin and width
    2 CSS lines to adjust text width and position
  11. Click the x at the top of Developer tools to close the tools and see your full page.

The first time you go through these steps, it will take you longer than resizing the browser. But over time, you’ll get faster. You’ll also start to see how web pages are constructed and other elements that you can change. The good news is you can’t break the web page. All you have to do is hit your refresh button and you’re back to seeing that too wide text.