Just a quick tip on improving the user experience of your site. By default, browsers are smart enough to figure out if parts of the page exceed the visible boundaries of the browsers' window. On the other hand, when you're viewing page that you can interact with (be it expanding a block of text, or loading a new tab via AJAX), often times the page's boundaries will change (i.e. the height of the page will increase/decrease) and the scrollbars will be added/removed as a result or more/less visible content.

Although this default behaviour is fine for most static sites, it starts to take away from the user experience when the page shifts left 20px and right 20px each time a scrollbar is added and removed, respectively. It's difficult for the end user to focus on what content actually changed versus what stayed the same. You'll notice a more seamless experience when switching tabs, and dynamically loading content.

By simply adding a CSS rule to the html (or body) tag, you can eliminate this so-called page jitter that happens each time the content is modified on the page.

In your main .css file, add the following code

html {
overflow-y: scroll;
}


That's it! Now each time your page/browser is resized, the scrollbar will be added/removed without any page shifting.