3 easy CSS tricks for responsive websites I use for every project

Below I will demonstrate three quick CSS tips & tricks I use for every website to make responsive design a lot easier, usually eliminating the need for media queries.

1. Scaling Font-sizes

For every single website I create I import this little line of CSS:

html {
  font-size: calc(60% + 0.8vmin);
}

This short line makes sure the font-size of the page scales with the size of the browser window. By doing this, smaller screen sizes automatically have smaller font-sizes, often giving you more space to work with on smaller sizes. This also makes sure font-sizes don’t become tiny on extra large window sizes. Take a look at the result of this quick CSS trick below:

Without Font Scaling

With Font Scaling

As you can see, on smaller screen sizes the text also scales down, but stays at a readable level. The font-size gets calculated by combining two variables: 60% and 0.8vmin. The first value is the base value: 60% of the font-size set by the browser. In most browsers the default is 16px. Because we don’t set it to an absolute value like 10px, the font-size will still respect users that have changed the default font-size of their browser. 0.8vmin is a relative value. 100vmin is the size of the smallest value of either the width or height of the window size. This value makes the text scale according to the size of the screen.

By setting the font-size on the HTML tag it sets every text element on the page to that font-size. You will notice however, that elements like inputs don’t use the HTML font-size. To bypass this, I usually set every element to 1rem like this:

* {
  font-size: 1rem;
}

Input Doesn’t Scale :(

Input Does Scale :)

However, this does mean that you’ll have to set headers back to their appropriate values. Use rems for this! I will explain why you should use rems next:

2. Rems for everything

Combined with the trick above, I use rems for absolutely everything. If you’re not familiar with rem, 1rem equals the font-size of the HTML element (which is why, in the previous trick, we set the font-size in the HTML tag). For most browsers, this font-size is set to 16px. There’s also em, which is similar to rem, but its value is the font-size of its parent element.

The beauty of using rems for everything is that your site will automatically scale according to the font-size. This means that when users set a larger font-size, which they most likely did because they have trouble reading what’s on screen, everything will scale accordingly making it easier for those people to use your site. Pair this with a scaling font-size and your site will automatically scale up or down for smaller and larger screen sizes respectively. Compare the difference below, notice how the image scales down because our font-size scaling, while the 400px image causes an ugly overflow:

400px

25rem

3. Max-width & auto margin

The last trick I use on any page that requires a single column of content in the center (which is basically every basic website made this year). I usually put this on my main, as that’s where my main content will reside (duh):

main {
  max-width: 40rem;
  margin: 0 auto;
}

This will scale the main to a max-width of 40rem, meaning it will max out on 40rem but it will still automatically shrink to smaller sizes. Obviously, you’re free to change this value to suit your website’s needs. The margin: 0 auto makes sure the content gets centred horizontally.

Result

Every trick above combined creates this easy responsive “website”:

The code for you to copy paste, including a font-size reset for the headers:

html {
  font-size: calc(60% + 0.8vmin);
}

main {
  max-width: 40rem;
  margin: 0 auto;
}

* {
  font-size: 1rem;
}

h1 {
  font-size: 2.2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.3rem;
}

Hope you found this helpful!