Some websites and pages that I visit throughout the day are broken if I load them in a browser window that is half the total screen size of the monitor. I use a 1920x1200 monitor and tend to display two browser windows side by side.
A prime example of this is the WordPress Plugin directory. When I open it, I see the left sidebar but no main content at all. The whole content area is blank, and I have to scroll down to find it below the fold.
A tiny bit of resizing to increase the window width does the trick and the content is displayed in its correct location.
That's annoying, as resizing the window means that it overlaps the second browser window.
It is not the only website or web page that is broken though. When I open the web brokerage site Flippa in Firefox for example, I only see the refine your search sidebar menu above the fold.
For some reason, it is displayed in full width here, and the actual websites are displayed below the fold as a consequence. Now, this appears to be a issue only in Firefox and not in Google Chrome, as the layout works fine in Google's browser.
I first thought that I had somehow changed the page zoom on those pages, but that turned out not to be the case. I moved Firefox's Page Zoom widget to the toolbar and it displayed a zoom level of 100% for each of them.
Fixing the problem
Here are a couple of suggestions that allow you to fix those display issues without changing the size of the browser window.
1. Change the Page Zoom level
This is without doubt the easiest option. All you have to do is hold down the Ctrl-key on your keyboard and move the mouse wheel up or down to change the zoom level of your browser.
All modern browsers apply the level only to the domain you are on, and not to other domains and sites that you open.
A single flick down is usually enough to display the page just fine in your browser of choice.
Note that contents will display smaller as a consequence.
Firefox users can install the excellent Zoom Page extension which ships with a "fit to page" option that you can make use of to fit any page to the browser window in just one click.
To use it, simply hold down the Shift-key on your keyboard and click on the icon the add-on places in one of the browser toolbars.
Chrome users can use the Zoomy extension instead which changes the zoom level based on the size of the browser window and resolution.
3. Fix the CSS
You can make permanent changes to most websites with the help of the browser extension Stylish or comparable add-ons.
The issue is elegant, as it won't change the text font size. The downside is that you need to know CSS to make use of it.
To fix the WordPress Plugin Directory site in Firefox for instance, you would do the following:
- Install Stylish.
- Open the WordPress Plugin Directory and hit F12 to open Firefox's Developer Tools window.
- Either go through the code manually, or use the Inspector to click on the element that is not displayed properly. In the case of this site, it is the main body area. (click on the "Pick an element from this page" button in the Developer Tools window for this.
- You will find .col-10 eventually which has a size of 772px. If you change the value to 720px, you will notice that the page displays fine now.
- Now that you know what to change, click on the Stylish icon and select Write New Style --> For WordPress.org.
- Here you simply copy the style information and save the new style afterwards.
The changes are applied to the web page whenever you load it for as long as you keep Stylish installed and the new style loaded.
Stylish is also available for Google Chrome.