DEV Community

Cover image for Learn how to build responsive websites with CSS media query
David Asaolu
David Asaolu

Posted on


Learn how to build responsive websites with CSS media query

Hi, welcome to this tutorial. Today, I will be explaining how to build websites that are fully responsive to all screen sizes with CSS3 media query. πŸš€

So sit back, put your seatbelts on, Let's Ride!πŸš€

Learn how to build responsive websites with CSS media query

So what is a Media Query?

Media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false.
It is written as

@media screen and (max-width: 768px) {
    body {
       display : none;
Enter fullscreen mode Exit fullscreen mode

The code above, simply means if the screen size is <=768px (less than or equal to 768px), the body of the HTML page should be blank.

The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding CSS styles are applied.

For a website to be fully website, Breakpoints are used.

Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes. They can be at any point you choose to make them available, but mostly, at the points where your website layout breaks.

Breakpoints are the building blocks of a responsive design

Here is an image of breakpoints, you should note, either of the two can be used.
Screen sizes breakpoints
Screen sizes breakpoints

So let's jump right into the practical use of media query and make a website layout fully responsive.πŸ˜€πŸš€

I just created a website layout using CSS Flexbox, if you are not familiar with flexbox, you may check here

Here is an Exercise for you πŸ˜€πŸš€

πŸš€ Edit this code on Codepen

πŸš€ Share the link your solution in the comment section

My Solution πŸš€ : Download the Source code here

I hope you enjoyed this short tutorial on Media query?
Media Query

Follow and Connect with me on
πŸš€ Linkedin
πŸš€ Twitter
πŸš€ GitHub

You may also view more examples
πŸš€ W3Schools
πŸš€CSS Tricks
πŸš€ MDN

Top comments (0)


11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!