Responsive CSS

NOTE: This article was written before flex and grid became as well known as they are today. Both of those features are game changers for responsive design, and I suggest you read up on it.

With the current growth rate of the technology industry, especially in the past decades where we have seen a tremendous amount of competition in regards to the smart phones as well as the tablets, many web developers as well as programmers have been struggling to keep up with the numerous changes. Although the arrival of platforms like Android and iOS opened many doors for programmers, those platforms also pushed a new responsibility on web developers: responsive web design. Since the new devices have a smaller screen when compared to a laptop or a desktop computer, web developers needed to find a way to adapt to keep their visitor’s experience as good as possible.

In short, responsive web design is a design that adapts to different screen sizes, orientations and browsers. For instance, a website must be pleasant to navigate on Firefox, Google Chrome, on a mobile device or on a laptop, on a 4K screen or on a 1024x768 screen. Because there wasn’t a lot of different screen sizes (and no smart phones), web responsiveness wasn’t always a concern, and this is why old websites look like garbage on modern devices. Unfortunately, this change made the job of web designers significantly harder (frameworks like Bootstrap do make the job much easier).

Luckily for us, there was an amazing update in CSS3: media queries.

For responsive web design, what we’re interested in is the fact that we can target a specific screen size and apply a style to it. Let’s take this box below as an example, when the size of your window will be under 600px, the background color will change to yellow. Otherwise, if the size of the window is above 600px, the background color will be blue.

CSS

#exampleA {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

@media screen and (max-width: 600px) {
    #exampleA {
        background-color: blue;
    }
}

@media screen and (min-width: 600px) {
    #exampleA {
        background-color: yellow;
    }
}

HTML

<div id="exampleA" />

Bluntly speaking, that’s not the only way you deal with responsive web designing, it has a lot to do with using percentage instead of fixed sizes. For instance, if you set ‘width’ to ‘50%’, the box will always be 50% of the page no matter what the screen size is. In this case, to make it even more efficient, we’ll make it so that if the screen is smaller than 600px, it will cover 100% to allow those on small devices to see the content of the div more easily (assuming there’d be a picture instead of a div, or text).

CSS

#exampleB {
    display: block;
    height: 200px;
    margin: 0 auto;
    background-color: red;
}

@media screen and (max-width: 600px) {
    #exampleB {
        width: 100%;
    }
}

@media screen and (min-width: 600px) {
    #exampleB {
        width: 50%;
    }
}

HTML

<div id="exampleB"></div>

In the end, that method is pretty much like doing two stylesheets rather than one, but if you own a bigger site with multiple pages using nearly the same page structure for each of them, what you can do instead of having everything in a single stylesheet is to split it in a second stylesheet which will only be applied when a specific screen size is met (in this case, if the device-width is under 600px):

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 600px)" href="your_mobile_css_file_here.css" />

Here’s some other cool stuffs you can do with responsive CSS, imagine this is a menu:

1
2
3
4

If you resize the page, eventually it will go from horizontal to vertical. This is pretty useful when you have a big menu, but smaller devices can’t fit it into the screen.

CSS

#exampleC div {
    text-align: center;
    display: inline-block;
    background-color: blue;
    color: white;
    padding: 5px;
    margin: 5px;
}

@media screen and (max-width: 600px) {
    #exampleC div {
        background-color: black;
        display: block;
        color: white;
    }
}

HTML

<div id="exampleC">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

True, responsive designing does force web developers to have a larger CSS file, but at this point in time, it’s definitely worth it. And if you really need to minimize the size of your CSS file, you can always use a CSS minifier.