how to create a simple responsive design for your website using only html and css

Building a websites that fits on all screens can sometimes be nerve-wracking. One of the reasons i chose web development was the fact that you could write code and run it on either mobile phone, tablets or desktop computers. In this tutorial i will be creating a simple responsive design using media queries that works on all screens. click here to check it out

Prerequisite 

Basic knowledge of HTML and CSS is needed to understand the concepts in this tutorials.

HTML

In our HTML , three blocks of text (block1, block2 and block3) with some dummy text added in them have been created to be used for the responsive display.

<div class="container-out">
    <div class="container-in">
    <center>
        <div class="block-out" id="block1">
        <div class="block-in">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of
            type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was
            popularised in the 1960s with the release of Letraset sheets
            containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of
            Lorem Ipsum.
        </div>
        </div>

        <div class="block-out" id="block2">
        <div class="block-in">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of
            type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was
            popularised in the 1960s with the release of Letraset sheets
            containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of
            Lorem Ipsum.
        </div>
        </div>

        <div class="block-out" id="block3">
        <div class="block-in">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s, when an unknown printer took a galley of
            type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was
            popularised in the 1960s with the release of Letraset sheets
            containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of
            Lorem Ipsum.
        </div>
        </div>
    </center>
    </div>
</div>

css

Don't forget to insert viewport meta tag that enables your website to be responsive

<meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

styling the html

.container-in {
    width: 97%;
    margin: 0 auto;
  }

  .block-out {
    margin-bottom: 10px;
    width: 33%;
    color: #f4f4f4;
    padding: 13px 0;
    display: inline-block;
  }

  .block-in {
    width: 93%;
    margin: 0 auto;
  }
  #block1 {
    background: #2ec0c0;
  }
  #block2 {
    background: #5093e0;
  }
  #block3 {
    background: #d65c46;
  }
  @media only screen and (max-width: 887px) {
    #block1 {
      width: 100%;
    }
    #block2 {
      width: 49%;
    }
    #block3 {
      width: 49%;
    }
  }

  @media only screen and (max-width: 500px) {
    #block1 {
      width: 100%;
    }
    #block2 {
      width: 100%;
    }
    #block3 {
      width: 100%;
    }
  }

After applying the styles we get something like this on the desktop

In the CSS code above you'll find out there are two media queries added to make the blocks responsive. media queries work like if statements, they apply different styles to selected element within a specific range of width. 

Lets look at the first media query

@media only screen and (max-width: 887px) {
    #block1 {
      width: 100%;
    }
    #block2 {
      width: 49%;
    }
    #block3 {
      width: 49%;
    }
  }

the styles in this media query applies whenever the width of your browser ranges from 0 or any media query less than 887px to 887px, this media query actually suits tablets. The first block now has a 100% width, which is the entire width while the second and third block both takes a new width of approx. 50% which is almost half of the width.  Below is an image of a screen within this range

Now lets look at the second media query

 @media only screen and (max-width: 500px) {
    #block1 {
      width: 100%;
    }
    #block2 {
      width: 100%;
    }
    #block3 {
      width: 100%;
    }
  }

the styles in this media query applies whenever the width of your browser ranges from 0 or any media query less than 500px to 500px, this media query actually suits mobile phones. Here all blocks receive a 100% width.  Below is an image of a screen within this range

with all the media queries applied, screen space is been utilized and it makes it convenient for your viewers to view your content properly on any device they may have.

conclusion

media query are actually fun to play with, once you get familiar with the concept, you can create really great websites that work on all screens.