Check Your Breakpoint using this Simple CSS Snippet

Tommy Marshall, Former Front-End Developer

Article Category: #Code

Posted on

When you’re looking at a 1400 pixel wide comp you never know when and at what point the design will demand a breakpoint. Most of us discover where a breakpoint is while we're actually resizing the site in the browser. To streamline this process a bit here's a small snippet I use during buildout to see exactly what breakpoint I'm working with.

Video Demo

Notice the tooltip to the top right of the browser changing based on the screensize.

The Code

Below is the barebone's CSS that would display your current breakpoint at the top of the page:

body:after {
  content: "Default";
  left: 50%;
  position: fixed;
  top: 0;
}

@media only screen and (max-width: 600px) {
  body:after {
    content: "Small";
  }
}

@media only screen and (min-width: 601px) and (max-width: 1200px) {
  body:after {
    content: "Medium";
  }
}

@media only screen and (min-width: 1201px) {
  body:after {
    content: "Large";
  }
}

That's it. The above CSS creates a pseudo-element on the body which changes the content based on a defined breakpoint. For a screen width of 600 pixels or less the content of the pseudo element will be swapped out for, "Small"; between 601 and 1200 pixels, "Medium"; and anything 1201 pixels or larger it would be, "Large". It helps to set a default content so you can see at what screen sizes you are not specifying in a given view.

Since it's just CSS, we might as well style it. Here's a more stylized SCSS version I use on my projects, and the Codepen demo below:

See the Pen agABu by Tommy Marshall (@tommymarshall) on CodePen

Do you have any tips or tricks you utilize when building out responsive views? Share them in the comments below!

Related Articles