How to make your page more responsive

Owned by Anastasia Cheetham
Last updated: Apr 20, 2023 by Michelle D'Souza
2 min read

Use rem or em for text size

Don't use pixels in your CSS, use rem or em instead. Pixels will not scale if a user stylesheet is applied to the page, or if the page is viewed on a small screen.

  • Set the base font size to 100%.
  • Calculate the desired ems for particular element by dividing the desired pixels by the base font size, which is typically 16px.
body: {
    font-size: 100%;
}
h1 {
    font-size: 1.5rem; /* 24px ÷ 16px per rem */
}
.footnote {
    font-size: 0.5rem; /* 8px ÷ 16px per rem */
}

Use rem or em for container sizes

Use rem or em for the document width, column widths and any other dimensions that affect the layout of the page. If you use ems for text and pixels for the container of that text, then enlarging the font will just squish the text into a tiny space.

body: {
    min-width: 50rem; /* 800px ÷ 16px per rem */
    max-width: 64rem; /* 1024px ÷ 16px per rem */
}
.sidebar {
    width: 12rem; /* 200px ÷ 16px per rem */
}


Use CSS to help images scale

If you are using a background image for anything, set the CSS background-size property to allow the image to scale when the element scales.

.banner {
    width: 30rem;
    height: 5rem;
    background-image: url('images/banner.png');
    background-size: contain; /* scale image to fit container */
}
.sidebar {
    background-image: url('images/sidebar-accent.png');
    background-size: 50% 100%; /* half the width and the full height of the container */
}


Use Flexbox Layouts

Using Flexbox layouts can simplify the positioning and wrapping of content across different screen and client window sizes. Flexbox works by specifying regions which are flexible, and then define the behaviour of each sub-container when it's flexed.

See the flexbox guide on CSS Tricks for additional information.

See Also