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 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. Responsiveness After 5 weeks of learning HTML and CSS with , 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. microverse 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, is fluid while is fixed. width: 14%; width: 14px; 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 be included inside the tag. This is to ensure the browsers render the responsive in different screen sizes: MUST <head> < = = > 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. Media Queries and Fluid Layouts Span One-Third 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. Span One-Third 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. Span One-Third 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. By: Taofeek . < = > div class "div-container" < > header < > h2 </ > h2 </ > header < > main < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article </ > main < > footer < > p < = = > a href "https://github.com/teekaytech" target "_blank" </ > a </ > p </ > footer </ > div In the code above, the 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. <div class="div-container"> 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: like smartphones (0px min, 479px max) We only specify the max-width on the media query statement like this: Extra-small devices @media only screen and (max-width: 479px) like portrait tablets, large phones etc (480px min, 767px max) Small devices @media screen and (min-width: 480px) and (max-width: 767px) like landscape tablets (768px min, 1023px max) Medium devices @media screen and (min-width: 768px) and (max-width: 1023px) like desktops, laptops (1024px min and above). For this also, we only need to specify the min-width in the media query: Large/extra large devices @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 ...fun, right? that the left and right margin of my parent div should share 5% of the total screen size { : inline-block; : darkgreen;
} { : ; : ;
} { : ;
} article display color .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 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: <article> 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. @ only screen and (min-width: ) { { : bolder;
  }
} media 1024px article font-weight 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: @ screen and (min-width: ) and (max-width: ) { { : darkred;
  }
} media 768px 1023px article color The snippet above . This is the magic of media query! changes the color of all articles to dark-red, whenever the size of the screen is within 768px & 1023px 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. Note: Next, I'll implement new changes for another screen size (480px min, 767px max). @ screen and (min-width: ) and (max-width: ) { { : blue; : block;
  } { : ;
  }
} media 480px 767px article color display .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: @ only screen and (max-width: ) { { : black;
  } { : ;
  }
} media 479px article color .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) Fluid Layout / Media Queries Media Queries and Fluid Layouts Span One-Third 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. Span One-Third 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. Span One-Third 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. By: Taofeek . <!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 </ > title </ > head < > body < = > div class "div-container" < > header < > h2 </ > h2 </ > header < > main < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article < = > article class "one-third" < > h4 </ > h4 < > p </ > p </ > article </ > main < > footer < > p < = = > a href "https://github.com/teekaytech" target "_blank" </ > a </ > p </ > footer </ > div </ > body </ > html CSS (fluid.css) { : ;
} { : inline-block; : darkgreen;
} { : ; : ;
} { : ;
}

@ only screen and (max-width: ) { { : black;
  } { : ;
  }
}

@ screen and (min-width: ) and (max-width: ) { { : blue; : block;
  } { : ;
  }
}

@ screen and (min-width: ) and (max-width: ) { { : darkred;
  }
}

@ only screen and (min-width: ) { { : bolder;
  }
} .div-container margin 0 5% article display color .one-third margin-right 3% width 30% .one-third :last-child margin-right 0 media 479px article color .one-third width 97% media 480px 767px article color display .one-third width 95% media 768px 1023px article color media 1024px article font-weight 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 , , , etc implemented responsiveness in a quick simpler way. In summary, bootstrap materialize foundation However, media queries help understand the basis on which most of the frameworks are built. To learn more, check out w3school's resources on and . media queries fluid layouts Connect with me on LinkedIn , Twitter , GitHub Happy coding!

Target

Twitter

Five Days into Vue.JS: My First Five(5) Takeaways

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Five Days into Vue.JS: My First Five(5) Takeaways

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Five Days into Vue.JS: My First Five(5) Takeaways

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps