Tag Archives: CSS

Software Development

CSS: Super simple design guides

Leave a comment

Needed to see if I had lined some stuff up correctly on a website I’m making. Came up with this simple CSS to add two guides to the page that I can move around freely in the browser developer console (just nudge their position around to where I need them).

It’s really simple, but for some reason didn’t think of it until now…

html::after {
    content: "";
    height: 1px;
    width: 100%;
    background: red;
    position: fixed;
    left: 0;
    bottom: 5px; /* Change this to move the guide horizontally */
}
html::before {
    content: "";
    height: 100%;
    width: 1px;
    background: red;
    position: fixed;
    top: 0;
    right: 5px; /* Change this to move the guide vertically */
}
Software Development

Prevent horizontal jumping with centered web pages

1 Comment

If you have a centered web page, you might have noticed ugly annoying jumping when you change between pages where some extend beyond the browser bottom and some don’t. This is of course caused by the simple fact that the vertical scroll bar appears and disappears depending on how long the page is.

Not a big deal, but I find it annoying. A simple fix is to simply always show the vertical scroll bar, which you can do with a tiny piece of CSS.

html
{
    overflow-y: scroll;
}

Problem solved.