How to make a responsive website with Media Query

A useful and usually required skill for web developers is to make their website available for all devices like pc or phones. Luckily, we can do this with Media Query, so in this article, we'll talk about how to use Media Query to make a responsive website.

How does Media Query Work?

Media query is used to give an action to the computer when the website reaches a certain point. To make it you first type @media followed by parentheses where you'll set the rule, then brackets where you'll put the action. In the action you have to choose what you’re going to change before putting the action, for example, if I put color: red; for the body, I first have to put it in the body selector.

Min and Max width

A common way to make a website responsive is by giving the media rule a minimum or maximum width. In the example below whenever the viewport's width is less than 500 pixels, the font size will get smaller. This is so that on devices like a phone the text won't overflow.

In the example below you see that the 3D cat pictures are before the first section, but if you got fullscreen you'll see that the cat pictures are horizontally aligned with the first section. That's because i coded it so in the media query if the viewport is less than or equal to 920 pixels the main element, which contains the pictures and the section, will have a flex-direction of column making the order vertical. If it weren't for this the section and the pictures would merge. I also coded it so the nav bar gets taken away and the last sections text is smaller.

@media (max-width: 920px) {
  /*Takes the nav bar away*/
 header, nav, .nav-list {
   display: none;
  }
  /*Makes the first section below the pictures*/
main {
  display: flex;
  flex-direction: column;
}
  /*Makes the last sections text smaller*/
  .letter-main {
    font-size: 14px;
}
}

Orientation

The orientation property is used only in the media query and is made to add an action to the viewports orientation. The orientation property only has two values, landscape and portrait. landscape is when the width is greater than the height while portrait mode is when the height is greater than the width. Lets say we give the media query of the codepen aboe an orientation rule. The value will be portrait so now when the height is bigger than width it'll do the action inside the query.

@media (orientation: portrait) {
  /*Takes the nav bar away*/
 header, nav, .nav-list {
   display: none;
  }
  /*Makes the first section below the pictures*/
main {
  display: flex;
  flex-direction: column;
}
  /*Makes the last sections text smaller*/
  .letter-main {
    font-size: 14px;
}
}

Print and Screen

print and screen are both keywords you use after @media. print is used if we want the query event to happen when somethings being printed while screen is used if we wnt the media query event to be on screen. We can put both by using the all keyword, which is the default value of the media querys event area.

@media print (max-width: 920px) 
/*Now the website is only effected when the website is being printed*/
{
  /*Takes the nav bar away*/
 header, nav, .nav-list {
   display: none;
  }
  /*Makes the first section below the pictures*/
main {
  display: flex;
  flex-direction: column;
}
  /*Makes the last sections text smaller*/
  .letter-main {
    font-size: 14px;
}
}