5,479 reads

CSS3 Fluid Layout And Media Queries: A Simple Approach to Responsive Web Design

by Taofeek OlalereMay 22nd, 2020

Too Long; Didn't Read

CSS3 Fluid Layout And Media Queries: A Simple Approach to Responsive Web Design. The concept is the process of making your web pages look good on any screen size. Fluid layout is implemented in CSS, by using percentages(%) as a unit of measurement instead of pixels or other units. Media Query is introduced in CSS3. It uses different screen breakpoints to change CSS declarations. In essence, its purpose is to change the look of some components of the web-page when accessed on mobile phones, tablets, desktops.

Companies Mentioned

featured image - CSS3 Fluid Layout And Media Queries: A Simple Approach to Responsive Web Design

Are you a beginner in web development? Would you like to make your web-page responsive without having to learn any framework? Have you ever been instructed to make a page responsive without any framework?

Let’s face it, pursuing a career in web development can be interesting and tiring at the same time. You have to learn a lot of technologies, you need to understand how to use a lot of tools and worry about a lot of concepts. If you find yourself in this situation, my advice to you is to take one step at a time. One of those concepts you will come across is responsiveness.

Let's talk about Responsiveness

Responsiveness is the process of making your web pages looks good on any screen size (view-port as they call it). This implies that all the components that made up your web pages are well arranged, no matter the size of the screen where it is rendered.

After 5 weeks of learning HTML and CSS with microverse, I came across this concept. I used to believe that we can only achieve responsiveness with a particular framework chosen by the developer. The whole thing took another dimension when I heard about fluid layouts and media queries.

What is Fluid Layout?

Fluid layout is a design type in which the layout of a web-page and its components resize with the screen size. In other words, the web page
adjusts as the screen size gets bigger or smaller.

Fluid layout is implemented in CSS, by using percentages(%) as a unit of measurement instead of pixels or other units. When pixels and other units are used, the layout of the page is fixed but when the percentage is used, it becomes fluid. For example,

width: 14%;

is fluid while

width: 14px;

is fixed.

What then is Media Query?

This technique is introduced in CSS3. It uses different screen breakpoints to change CSS declarations. In essence, its purpose is to change the look of some components of the web-page when accessed on mobile phones, tablets, desktops, etc.

This is implemented using the @media rule to execute block(s) of CSS codes when a condition is met.

How do I get started?

For a demo of this concept, I'll be using two files: index.html and fluid.css files. In the index.html, the meta tag below MUST be included inside the

<head>

tag. This is to ensure the browsers render the responsive in different screen sizes:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next, let's input the following code in the body of index.html file.

<div class="div-container">
    <header>
      <h2>Media Queries and Fluid Layouts</h2>
    </header>
    <main>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Facilisi etiam dignissim diam quis enim lobortis.</p>
      </article>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Urna molestie at elementum eu facilisis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac.
          Volutpat ac tincidunt vitae semper quis lectus. Imperdiet proin fermentum leo vel. </p>
      </article>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </p>
      </article>
    </main>
    <footer>
      <p>
        By: <a href="https://github.com/teekaytech" target="_blank">Taofeek</a>.
      </p>
    </footer>
  </div>

In the code above, the

<div class="div-container">

tag with class div-container is the parent container. I have 3 sub-sections named header, main and footer. The main section has 3 articles.

Note:

When dealing with responsiveness, I can decide to implement for larger screens first, then work down the other screen sizes. It is also possible to implement for small screens first, then work my way up to the larger screens. For the purpose of this article, I'll implement for larger screens first, then work my way down to the smaller screens.

There are different devices with different screen sizes. For this article, I'll be using 4 breakpoints (common screen groups' widths), which are:

Extra-small devices like smartphones (0px min, 479px max)
We only specify the max-width on the media query statement like this:
```
@media only screen and (max-width: 479px) 
```
Small devices like portrait tablets, large phones etc (480px min, 767px max)
```
@media screen and (min-width: 480px) and (max-width: 767px)
```

Medium devices like landscape tablets (768px min, 1023px max)

@media screen and (min-width: 768px) and (max-width: 1023px)

Large/extra large devices like desktops, laptops (1024px min and above).
For this also, we only need to specify the min-width in the media query:
```
@media only screen and (min-width: 1024px)
```

Moving on, let's try to give some basic styling to the elements in our page. In my fluid.css file, I have the following lines of code:

.div-container {
  margin: 0 5%;
}

First, I declared some horizontal margin for the parent container. Instead of using pixels, I used 5% which means that the left and right margin of my parent div should share 5% of the total screen size...fun, right?

article {
  display: inline-block;
  color: darkgreen;
}

.one-third {
  margin-right: 3%;
  width: 30%;
}

.one-third:last-child {
  margin-right: 0;
}

Next, since I'm starting with larger screens, I want all articles to be on a single row (100%). The

<article>

element is a block element, I first changed the display property of articles to inline-block, then I declared the right margin of each article to be 3%. Also, I specified that each article should occupy 30% of the whole row. Lastly here, I made the right margin of the last article to be 0. At this level, my page looks like this for all screen sizes:

The above is okay for larger screens (1024px & above). But since I'm dealing with media queries, I'll change a CSS declaration for larger screens too.

@media only screen and (min-width: 1024px) {
  article {
    font-weight: bolder;
  }
}

All I had to do is to open the media query as specified above, then I put all declarations that I'm willing to change their values inside the media query statement. Here, I only changed the font-weight of all articles to become bolder for larger screens above 1024px.

Let me try to change some of these properties for large screens (768px min, 1023 max) in my fluid.css file. To do that, I'll use the following snippet:

@media screen and (min-width: 768px) and (max-width: 1023px) {
  article {
    color: darkred;
  }
}

The snippet above changes the color of all articles to dark-red, whenever the size of the screen is within 768px & 1023px. This is the magic of media query!

Note: there are other ways/methods of specifying the min and max widths in the media query statement, but I'll stick with this method in this article.

Next, I'll implement new changes for another screen size (480px min, 767px max).

@media screen and (min-width: 480px) and (max-width: 767px) {
  article {
    color: blue;
    display: block;
  }

  .one-third {
    width: 95%;
  }
}

Here, for the specified screen size, I changed the color of all articles to blue. I also changed the display declaration to block because I want each article to be on separate lines. Lastly, I changed the width of each article to 95%. The output is shown below:

Lastly for extra-small screens (479px max), I used the following declarations:

@media only screen and (max-width: 479px) {
  article {
    color: black;
  }

  .one-third {
    width: 97%;
  }
}

In the snippet above, for the specified screen sizes, I changed the color of all articles to black, then I increased the width of each article to be 97% of each row. The output is shown below:

Complete Code:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="fluid.css">
  <title>Fluid Layout / Media Queries</title>
</head>

<body>
  <div class="div-container">
    <header>
      <h2>Media Queries and Fluid Layouts</h2>    </header>
    <main>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Facilisi etiam dignissim diam quis enim lobortis.</p>
      </article>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Urna molestie at elementum eu facilisis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac.
          Volutpat ac tincidunt vitae semper quis lectus. Imperdiet proin fermentum leo vel. </p>
      </article>
      <article class="one-third">
        <h4>Span One-Third</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </p>
      </article>
    </main>
    <footer>
      <p>
        By: <a href="https://github.com/teekaytech" target="_blank">Taofeek</a>.
      </p>
    </footer>
  </div>
</body>

</html>

CSS (fluid.css)

.div-container {
  margin: 0 5%;
}

article {
  display: inline-block;
  color: darkgreen;
}

.one-third {
  margin-right: 3%;
  width: 30%;
}

.one-third:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 479px) {
  article {
    color: black;
  }

  .one-third {
    width: 97%;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  article {
    color: blue;
    display: block;
  }

  .one-third {
    width: 95%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  article {
    color: darkred;
  }
}

@media only screen and (min-width: 1024px) {
  article {
    font-weight: bolder;
  }
}

In summary,
Using fluid layouts with media queries is a quick way to develop responsive
web pages with little or no complications or whatsoever. Yes, frameworks like bootstrap, materialize, foundation, etc implemented responsiveness in a quick simpler way.

However, media queries help understand the basis on which most of the frameworks are built. To learn more, check out w3school's resources on media queries and fluid layouts.

Connect with me on LinkedIn, Twitter, GitHub

Happy coding!