Thanks!

You are now subscribed to our monthly blog digest. Happy reading!

Click anywhere to dismiss ...

Codepen Challenge: 403 Page with Responsive Font Sizing and CSS Variables

This month, the Codepen Challenge is all about error pages.

These challenges are a great way to practice skills and flex some creative muscles.

For this challenge, I wanted to build a 403 error page based on a “Restricted Area” sign, playing off the somewhat ominous error code “forbidden.” To make this sign responsive for any screen size, I used a combination of rem, em, and px for font-size units and CSS variables to manage breakpoint changes. I also used drop-shadows and radial gradients for a 3D effect, and SVG, HTML and CSS to create all the shapes.

See the Pen 403 Forbidden Codepen Challenge by Claire Remmert (@claireremmert) on CodePen.

Responsive Font Sizes

Using a combination of pixels and relative units for font sizes is a powerful way to create modules that are simple to scale.

To keep the basic proportions across mobile and desktop I knew I would need a huge difference in scale that would be pretty consistent within the sign itself. Knowing that, I set a base font size on my html element of 20px, and then set a base font size on the sign module of 1rem. Using rem makes this relative to the “root”, or the html element of the page.

Then, I give every element inside the sign module a different size using em. This will make those elements size in relation to their parent element, rather than the root.

That way I only need to alter the base module font size at each breakpoint, and the rest of the sizes will scale accordingly.

However, there is one element for which this behavior doesn’t make sense. The <p> element that containers the subscript of the sign starts out at a pretty small font size, and I don’t want it to scale as dramatically so as to remain readable even at very small screen sizes.

To solve that, I decided to assign that <p> a font size using px, therefore removing it from the module sizing and keeping it the same size until I explicitly reset it, which I do only at the smallest screen size.

CSS Variables

This project also was a perfect opportunity to include a CSS variable, or custom property.

To create the shapes for the holes in each corner of the sign, I absolutely positioned four elements equal distances from the edges, depending on which corner they are in.

That means one value, but having to be distinctly applied to different instances of top,left,bottom, and right.

To make this code the least redundant as possible, I used a variable to hold that single value that I could alter at different breakpoints.

:root { --hole-distance: 25px; }

#hole1 { top: var(--hole-distance); left: var(--hole-distance); }
#hole2 { top: var(--hole-distance); right: var(--hole-distance); }
#hole3 { bottom: var(--hole-distance); left: var(--hole-distance); }
#hole4 { bottom: var(--hole-distance); right: var(--hole-distance); }

@media screen and (max-width: 600px) {
  :root {
    --hole-distance: 8px;
  }
}

To see all the excellent and inspiring responses to this month’s Codepen Challenge, check out #cpc-403.

Protect Your Business Data

We are passionate about helping our customers protect their data. We want you to use Jungle Disk to protect yours. Click on Sign Up to get started. It takes less than 5 minutes!

Sign Up