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.
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.
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;-)
Can Audio Improves Performance?
- Find a web page where you’d like to reduce the text width.
- On your browser, press Ctrl + Shift + I.
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.
- On the Developer tools panel, click the Elements tab toward the top left. See (B) above.
- Click the Element Inspector button. It should be the first button. Or, you can press Ctrl + Shift + C.
- 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.
- When you’ve found your area, click it with the mouse.
- On the Elements pane, you should see an item highlighted. In my case, it’s “entry-content”.
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.
- In the lower section of Developers tool make sure you’re on the Styles tab.
- Click right after element.style {
A new line will appear underneath with a flashing colon and semi-colon.
- On this new line, type Width and press your Tab key. Type 55%.
As you might guess, this text changes the element’s width. I chose 55% for this demo, but you can use other values.
- Press Enter.
You should see the text narrow. However, let’s center the content.
- On the next line, type margin and press Tab. Type 0 auto.
- Press Enter.
- 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.