Creating Responsive Style Sheet With Media Queries

In the last article we’ve seen the basic rules to create a simple layout for a website. After concentrating on the pc-desktop version, in this fourth part of the series, we’ll see which are the rules to apply to make the layout responsive.

So, the final result will become pleasant for both tablets and smartphones, as we’ll see in the final part. Screen resolution nowadays ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn't work any more. Web design needs to be adaptive. This tutorial will show you how to create a cross-browser responsive design with CSS3 media queries.



Another aspect of this technique where its simplicity really shines, is in how well its flat aesthetics translate so strongly on smaller screens (handhelds and mobile devices) without losing any of the impact they deliver. This is one way that it becomes so flexible.



As I introduced in the third article of the series, for the sake of clarity, we’ll use two style sheets for our website to keep different concepts separated; in relation with this topic, it’s good to remember that in production, you should use one of the available tools to minimize and merge the various CSS style sheets into a unique file to improve performances.



Now, let’s dive into the code and examine which are the most important changes that we have to apply to get our result.

First of all, we’ve to set the chosen breakpoints in our document. To do this, you have to put this line at the top of responsive.CSS: You can also see live demo our final project by click on live preview link below.

Live Preview

@media screen and (min-width: 800px) and (max-width: 1440px)

Now we are going to apply few rules to specify for this version.

@media screen and (min-width: 800px) and (max-width: 1440px) {
    #content-wrapper {
        border: none;
        margin: 0% auto;
        margin-top: 2%;
        padding: 1%;
        width: 80%;
        min-width: 700px;
        max-width: 1439px;
    }

    .box {
        background: #ffffff;
        padding: 2%;
        margin: 2% 0% 2% 2%;
        width: 43%;
        display: inline-block;
        vertical-align: top;
        border: 1px solid transparent;
    }

    .image-box {
        float: left;
        max-width: 40%;
        float: left;
        padding: 0px 2% 1% 0%;
    }
}

The rules to which you should pay more attention for this version are those applied to the header section. For the former, thanks to the rule max-width: 100%;the header will render at its native dimensions as long as its width doesn’t exceed the width of its container. Resizing your browser window, the header proportions will remain intact, even as the page scales down accordingly.



let’s have a look at the CSS media queries applied on all those devices whose min width 320 pixels. The first thing you’ll notice is that fonts and images have changed. For smaller screens, the first rule to remember is that everything has to be: clear, fast and understandable.

@media screen and (min-width: 320px) and (max-width: 799px) {
    #header {
        width: 100%;
        margin: 0%;
        text-align: center;
        padding: 2%;
        background: rgba(0,0,0,0.1);
        height: 50px;
    }

    #content-wrapper {
        border: none;
        margin: 1%;
        padding: 1%;
        min-width: 200px;
        width: 100%;
    }

    .box {
        background: #ffffff;
        width: 92%;
        padding: 2%;
        display: inline-block;
        vertical-align: top;
        border: 1px solid transparent;
        margin: 0 0 15px 0px;
    }

    .image-box {
        float: left;
        padding: 0% 2% 2% 0%;
        max-width: 100px;
    }

    h1 {
        text-align: center;
        font-size: 25px;
        letter-spacing: 0;
    }
}

This series about how to build a responsive, mobile-friendly website has ended. I hope you’ve enjoyed it!

Download Completed Template

If there is any advice that I can give to you, is to continue to “practice with this stuff”, not only in the practical realization of the website, but also in the design phase design phase which has a fundamental importance because it’s extremely important that everything is planned in detail; only in this case you’ll avoid waste of time and exhausting corrections, and you’ll perfectly understand how to organize your content and improve your final result. Thanks for reading our responsive series stay tuned for more useful stuff.