Learn CSS Media Queries by Building Three Projects
Tags: css, tutorial, webdev, beginners
Published: 2021-04-26 19:27:47

Today we're gonna learn how to use CSS Media queries to build responsive websites & practice by doing 3 projects. Let's go 🏅

# Table of Contents -->
   * [What are CSS Media Queries?](#level-1)
   * [Steps to follow](#level-2)
   * [The Syntax](#level-3)
   * [Practice Projects](#level-4)
   * [Conclusion](#level-5)


Topics to discuss at a glance :

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vrrjohwnmdvbtexg1r2.png)


## You can watch this tutorial on YouTube as well if you like:

{% youtube HY8q4TD3KGM %}

## Original Post at [Free Code Camp](https://www.freecodecamp.org/news/learn-css-media-queries-by-building-projects/)

# What are CSS Media Queries? <a name = "level-1"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyjadc0b95rjuzjlcgck.png)

CSS Media Queries allows us to create Responsive website across all screen sizes ranging from desktop to mobile screen. Therefore, It's a must to learn this topic. 

Here's a demo of the magic of Media Queries 👇 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb0qwxrhg0705lvs6ihs.png)


We'll build that on project 2. Layout is called **Card Layout**. More Layout Examples [here!](https://csslayout.io/patterns/)

# How to Set Up the Project <a name = "level-2"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wa8xgu2o74y2d60cq3g.png)

For this project, you need to know little bit of HTML, CSS and know how to work with VS code. Follow along with me ->

   1. Create a folder named "Project-1"
   2. Open VS Code
   3. Create **index.html, style.scss** & **main.js** file 
   4. install Live Server & SASS Compiler
   5. Run Live Server & SASS Compiler


## HTML

On HTML, Write this code inside the body tag 👇

```HTML
 <div class = "container"></div>
```

we also need to see the exact size of our window. Here's a demo of what I mean 👇

![Demo](https://media.giphy.com/media/06zg3tXmCsfA6hX5zo/giphy.gif)


So, write this line below inside the html file, ->

```HTML
  <div id="size"></div>
```

## SCSS

We'll Use SCSS, not CSS. But..... what is SCSS?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5a3hp7070ls26dovja2.png)

SCSS is a pre-processor of CSS which is more powerful than regular CSS. Using SCSS we can ->
   1. Nest our selectors like a branch of a tree and better manage our code.
   2. Store various values into variables 
   3. Use Mixins to stop code repetition & save time 

And Much more !



On SCSS, we'll remove our default browser settings, change box-sizing, font-size & font-family, like this 👇

```SCSS
*{
  margin : 0px;
  padding : 0px;
  box-sizing : border-box; 

  body{
    font-size : 35px;
    font-family : sans-serif;
  }
}
```

**Don't forget** to set **height** of the **.container class.** Otherwise we'll fail to achieve our desired results ->


```SCSS
.container{
  height : 100vh;
}
```

Remember the additional id we wrote in HTML ? We'll style it & position it on our browser here ->

```SCSS
#size {
  position: absolute;

// positioning screen size below our main text
  top : 60%;
  left: 50%;

  transform: translateX(-50%);

  color : red;
  font-size : 35px;
}
```


## JavaScript 

We need to update our screen size inside our id every time we resize our window. So, write these codes in main.js file ->

```javascript

// 'screen' is name 👇 of a function
window.onresize = screen;
window.onload = screen;

// Function named 'screen' 👇

function screen() {
  Width = window.innerWidth;
  document.getElementById("size").innerHTML 
   = "Width : " + Width + " px" 
}
```


## Download the images for the project

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u72rvfe5181640ikqa32.png)


Responsive website also means **Responsive Images**. We're also going to make images responsive in this project. The images are on my **[GitHub repository](https://github.com/JoyShaheb/Project-image-repo/tree/main/Media-Query-Project)**. Here's how to get them:

   1. Visit and copy the link above ☝️
   2. Go to **[downgit](https://minhaskamal.github.io/DownGit/#/home)** and paste the link you copied
   3. Follow the steps in this video 👇


![Down Git Steps to follow](https://cloud.githubusercontent.com/assets/5456665/17822364/940bded8-6678-11e6-9603-b84d75bccec1.gif)



And.... we're all set ! Let's Start Coding 😊

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5qj78v41btdq7sewdzs.png)


# The Syntax <a name = "level-3"></a>

The syntax of a Media Query 

```SCSS
@media screen and (max-width: 768px){
  .container{
   //Your code's here
  }
}
```
An illustrated Explanation ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1wvg9w8co1hq3d24uxi.png)


Let's divide the syntax into 4 section :-
   1. Media Query Declaration
   2. The Media Type
   3. min-width & max-width Function
   4. The Code itself


### To understand all 4 section of the syntax, let's start our **First Project**

![Project-1 Video](https://media.giphy.com/media/t4QOOfmnupAqnHcI9H/giphy.gif)

We'll Build this ☝️ A small project where background-color changes on resizing the window by taking 1 small step at a time. Let's start !

### HTML 

place some text inside our HTML, like this ->

```HTML
<div class = "container">

   <div class = "text">
      Hello Screen !
   </div>

</div>
```

### SCSS

Now, we'll store 4 color codes inside variables like this 👇

```SCSS
$color-1 : #cdb4db ; // Mobile
$color-2 : #fff1e6 ; // Tablet
$color-3 : #52b788 ; // Laptop
$color-4 : #bee1e6 ; // Desktop
```

More colors at [coolors.co](https://coolors.co/palettes/trending)

Now, come at the bottom, target the .container & .text classes. We'll also center our text like this👇

```SCSS
.container{
//To place text at center

  display : grid;
  place-items : center;

  background-color : $color-1;
  height : 100vh;
}

.text{
 // keep it blank for now
}
```

So far so good !


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grc7r9mbpw7yvoisgj6c.png)


## 1. Media query declaration Rule

Media Queries start with the @media declaration. Main purpose of writing this is to **tell the Browser** that we have specified a media query. On CSS, write like this 👇

```SCSS
@media 
```

## 2. The Media Type

This is used to specify the nature of the device we're working with. The 4 values are ->
   * all
   * print
   * screen
   * speech

Purpose of every 4 value at a glance 👇


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea8yqchxnmdlqyq9es0m.png)


We declare the **media type** after @media declaration. Like this 👇

```SCSS
@media screen
```

## FAQ : Why do we write The "and" operator?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8qezvhk9m896ns97jta.png)

Let's say, we're placing an order at a restaurant, "A burger **and** a pizza". Notice that the 2 orders are separated by a **[and]**

Likewise, media type, min-width & max-width functions are basically conditions we are giving to the browser. We don't write **"and"** operator if we have 1 condition. Like this ->

```SCSS
@media screen {
  .container{
     // Your code here 
  }
}
```

We write **"and"** operator if we have 2 conditions. Like this ->

```SCSS 
@media screen and (max-width : 768px) {
  .container{
     // Your code here 
  }
}
```

You can also skip the media type and work with just min-width & max-width. Like this ->

```SCSS 
//Targeting screen sizes between 480px & 768px 

@media (min-width : 480px) and (max-width : 768px) {
  .container{
     // Your code here 
  }
}
```

If you have 3 conditions or more, you can use a **comma**, like this ->

```SCSS
//Targeting screen sizes between 480px & 768px 

@media screen, (min-width : 480px) and (max-width : 768px) {
  .container{
     // Your code here 
  }
}
```


##  3. min-width & max-width Function

Let's discuss the Most important component of a media query, Screen breakpoints. 

To be honest, there's no such thing as a standard screen break-point guide due to countless screen sizes on the market. But, for our project, we'll follow [The Official Bootstrap 5](https://getbootstrap.com/docs/5.0/layout/breakpoints/) screen break-point values

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pqqlkxksxgouje83vhw.png)

Here's a list of every device screen resolution on [CSS-Tricks](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/).


### max-width : 

Using this function, we are creating a boundary. This will work as long as we are **inside the boundary**. Here's a sample 👇


Our Boundary is 500px


![max-width](https://media.giphy.com/media/50L0raPo5ZSdxCOlmP/giphy.gif)

notice how the light purple color gets **Disabled** when we hit above 500px. 


To recreate this, write these on SCSS

```SCSS
.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}
```

At the bottom, insert the media query, like this 👇

```SCSS
@media screen and (max-width : 500px){
  .container{
    background-color: $color-1;
  }
}
```





### min-width :

we are also creating a boundary here. But, This will work if we go **outside the boundary**. Here's a sample 👇

Our Boundary is 500px

![Min-width](https://media.giphy.com/media/iThpfWPRTBSQXn2gpO/giphy.gif)


Notice how the light purple color gets **Enabled** after we hit above 500px width.

To recreate this, write these on SCSS


```SCSS
.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}
```

At the bottom, insert the media query, like this 👇

```SCSS
@media screen and (min-width : 500px){
  .container{
    background-color: $color-1;
  }
}
```


To sum it up, remember that 
   * **max-width** sets styles inside the set boundary

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/227jg6drq6faqc47e2ox.png)

   * **min-width** sets styles outside the set boundary

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8ds85udh6l20hdh6lbm.png)


## The code itself :

Let's put our project-1 together !

We will have 4 screen breakpoints 
   * Mobile  -> 576px
   * Tablet  -> 768px
   * Laptop  -> 992px
   * Desktop -> 1200px

Yes, we are following the official [bootstrap 5](https://getbootstrap.com/docs/5.0/layout/breakpoints/) screen breakpoints. And each breakpoints will get these colors -> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d42pdgggmovcrsq8p61n.png)


For 4 device types, we will have 4 Media Queries. Before touching the 4 media queries, first, store the breakpoint values in variables. Like this 👇

**Note :** Don't forget to put the **$** sign

```SCSS
$mobile  : 576px;
$tablet  : 768px;
$laptop  : 992px; 
$desktop : 1200px;
```


And our .container class should look like this 👇

```SCSS
.container{
  background-color: white ;
  height: 100vh;
  display: grid;
  place-items: center;
}
``` 

We're all 50% done ! Now let's setup the 4 media queries 👇


## But Wait...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/net2cuugxdaz9idwbwhl.png)


You need to follow a serial while writing the media queries. Start writing from the **largest display to the smallest display.**


### Desktop - 1200px

For the Desktop screen, write these on SCSS 👇


```SCSS
// using variable here which is  👇 1200px
@media screen and (max-width: $desktop){
  .container{
    background-color: $color-4;
  }
}
```



The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1cuuy0m4zw57sh9zdzf.png)



### Laptop - 992px

For the Laptop screen, write these on SCSS 👇


```SCSS
// using variable here which is  👇 992px
@media screen and (max-width: $laptop){
  .container{
    background-color: $color-3;
  }
}
```


The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fng9y622xtb9pa6ngfwj.png)



### Tablet - 768px

For the tablet screen, write these on SCSS 👇


```SCSS
// using variable here which is  👇 768px
@media screen and (max-width: $tablet){
  .container{
    background-color: $color-2;
  }
}
```



The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wqp9xjt4gg272pc3hkt.png)




### Mobile - 576px

For the mobile screen, write these on SCSS 👇

```SCSS
// using variable here which is  👇 576px
@media screen and (max-width : $mobile){
  .container{
    background-color: $color-1;
  }
}
```

The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z10764qm7cjjc8a2yb7j.png)




## Take a Break 

Congratulations for Completing Project 1 but, first, **take a break. You deserve it !**


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6j0uyekswj04ag3p2cl.png)












































































# Let's do some projects using CSS Media Queries <a name = "level-4"></a>


## Project-2 Responsive Portfolio

We'll build this, A small responsive Website👇

### Desktop View 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay01oqdseulalsw3gpdh.png)


### Mobile View

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hob05vxov52hrm5quz0a.png)






Okay then, Let's start Coding ! First, let's work with the Desktop View by taking small baby steps 


### Before Starting

Create a folder named 'images' inside our 'Project-1' Folder. Place all the images you downloaded from my [GitHub Repository](https://github.com/JoyShaheb/Project-image-repo/tree/main/Media-Query-Project) inside the 'images' folder. 

## HTML

### Step - 1

We'll create 3 sections for our website. Write these Codes inside HTML



```HTML
<div class="container"> 

    <div class="header"></div>

    <div class="main"></div>

    <div class="footer"></div>

</div>
```

### Step - 2

We'll place the logo & menu items inside the .header div

```HTML
<div class="header">

      <div class="header__logo">Miya Ruma</div>

      <div class="header__menu">
          <div class="header__menu-1"> Home </div>
          <div class="header__menu-2"> Portfolio </div>
          <div class="header__menu-3"> Contacts </div>
      </div>

  </div>
```


### Step - 3

We'll place the image & text inside the .main div


```HTML
<div class="main">

     <div class="main__image"></div>

     <div class="main__text">

       <div class="main__text-1">Hello 👋</div>

       <div class="main__text-2">I'm <span>Miya Ruma</span></div>

       <div class="main__text-3">A Designer From</div>

       <div class="main__text-4">Tokyo, Japan</div>

     </div>

</div>
```


### Step - 4

We'll place the social media icons inside the .footer div

```HTML
<div class="footer">

   <div class="footer__instagram">
      <img src="./images/instagram.png" alt="">
   </div>

   <div class="footer__twitter">
      <img src="./images/twitter-sign.png" alt="">
   </div>

    <div class="footer__dribbble">
       <img src="./images/dribbble-logo.png" alt="">
    </div>

    <div class="footer__behance">
       <img src="./images/behance.png" alt="">
    </div>

</div>
```





## SCSS

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ou3jrlk5g9mjodfh88n.png)


### Step-1

Delete everything inside our SCSS & write these ->

```SCSS
* {
  // placing Margin to left & right
  margin: 0px 5px;

  padding: 0px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
  }
}
```

The result so far ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3egdxy9f5wf8xgc2ekn8.png)


### Step-2

Select All the classes we created in HTML on our stylesheet.

```SCSS
.container{}

.header{}

.main{}

.footer{}
``` 



### Step-3

Now select all the children of the parent classes.


```SCSS
.header{
  
  &__logo{}

  &__menu{}
}

.main{

  &__image{}

  &__text{}
}

.footer{

  [class ^="footer__"]{}

}
```

**Note :** &\_\_logo nested inside .header is shortcut of .header\_\_logo


### Step-4

Define the .container for desktop layout

```SCSS
.container{

// Defining height
  height: 100vh;

  display: flex;

  flex-direction: column;
}
```

Apply display: flex; to .header & to the menu items so that it behaves like a row, not column

```SCSS
.header{
  display: flex;
  flex-direction: row;

  &__logo{}

  &__menu{
    display: flex;
    flex-direction: row;
  }
}
```

Divide each section & create borders to see what we are doing


```SCSS
.header{
  display: flex;

// The border & height
  border: 2px solid red;
  height: 10%;

// Other selectors are here

}

.main{

//The border & height
  border: 2px solid black;
  height: 80%;

// Other selectors are here

}

.footer{

// Border & height
  border: 2px solid green;
  height: 10%;

// Other selectors are here
}
```



The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o77rk1bj2m722jf41mju.png)


### Step-5

Let's complete styling our .header section using flex-box properties & appropriate font-size

```SCSS
.header {
// height
  height: 10%;

  display: flex;
// Aligning logo & menu at center
  align-items: center;

// space between logo & menu
  justify-content: space-between;

  &__logo {
    font-size: 4vw;
  }

  &__menu {
    display: flex;
    font-size: 2.5vw;

// to put gap between menu items
    gap: 15px;
  }
}
```


The result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx4d43xmeggdaw2h2pdf.png)

### Step-6

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tyojtcpe7o1o9mukum6.png)

Let's add the image inside .main section & create a partition for image & text.

```SCSS
.main {
  // image & text will act like a row
  display: flex;
  flex-direction: row;

  //The border & height
  border: 2px solid black;
  height: 80%;

  &__image {
    //Adding the image
    background-image: url("./images/Portrait.png");
    // will cover half of screen width
    width: 50%;
  }

  &__text {
    // will cover half of screen width
    width: 50%;
  }
}
```

The ugly result so far, but don't lose hope !

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q13at8wcniamqpwh7jv.png)


### Step-7 - The image

Style the image to be responsive ->

```SCSS
.main{
  &__image{
  //make image fluid
    background-size: contain;

  // stop image repetition
    background-repeat: no-repeat;

  // position the image
    background-position: left center;
  }
}
```


The result so far ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24r955u9wwww9vdwwhk5.png)

The image is responsive from **4k** till your **smart watch screen**. Don't believe me? Open chrome developer tools & test it yourself and see.

![4k test](https://media.giphy.com/media/7Us5yEqyNW6IkOR1fs/giphy.gif)


### Step-8 - The text

Let's style our text now. Bring it to the exact center


```SCSS
.main{

  &__text {
    // will cover half of screen width
    width: 50%;
    display: flex;
    flex-direction: column;

// To bring it at the center 
    justify-content: center;
    align-items: center;
  }

// To color The name 
  span{
    color: red;
  }

}
```





```SCSS
.main{


  &__text{

// To add gaps between texts vertically
    gap: 15px;
    
// font size for "hello"
    &-1{
      font-size: 10vw;
    }

// font size for other texts
    &-2,&-3,&-4{
      font-size: 5vw;
      
    }

  }
}

```

The result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kne4bezy1ft0ro6ore0p.png)

   * Upto this point, you can remove all the borders we placed inside our header, main & footer classes


### Step-9 : The footer Section

First, resize the images like this ->

```SCSS
.footer{
  [class^="footer__"] {
    img {
      width: 5.3vw;
    }
  }
}
```

Then, position the images to our desired place, with some gap between the icons ->

```SCSS
.footer{
  display: flex;
  flex-direction: row;

// To align icons along x-axis
  align-items: center;
// placing image to the right side
  justify-content: flex-end;
// Gap between icons
  gap: 20px;

// margin to right side of icons 
  margin-right: 10%;
}
```

The result, without the guides ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itzk2rwz621vjm1k833c.png)

### Step-10 : The mobile Layout 

Almost there ! 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9w8h1owma15wmrzqb5cd.png)

Create a media query at 650px mark & style the .header class like this ->

```SCSS
@media (max-width: 650px) {

  .header {

// To place logo at center
    justify-content: center;

    &__logo {
      font-size: 40px;
    }
//hiding the menu on mobile device
    &__menu {
      display: none;
    }
  }
}
```

### Step-11

Now, place the .main section at the exact center ->

```SCSS
@media (max-width: 650px){
// styles of header section of step-10...

// main section here 
  .main {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
```

### step-12 :

Style the image & text for mobile layout. Like this ->

```SCSS
@media (max-width: 650px){

 .main {
   &__image {
// Image size 
      height: 200px;
      width: 200px;
      background-size: 100%;

// To have rounded image 
      border-radius: 100%;
      background-position: center;
    }

// Styles for the text ->
    &__text {
      width: 100%;

      &-1 {
        display: none;
      }
      &-2, &-3, &-4 {
        font-size: 30px;
      }
    }
}

```


### Step-13

The last step, Let's style the footer section for the mobile layout -> 

```SCSS
@media (max-width: 650px){
  .footer {
// placing icons along the X-axis
    justify-content: center;
    margin: 0px;

    [class^="footer__"] {

// Resizing images for mobile layout
      img {
        width: 45px;
        height: 45px;
      }
    }
  }
}
```

The result -> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dxzqtz8it2xhzpxf4ll.png)


## Take a break 

Good job so far ! Take a break😊

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdd7i01tivcfgg4nki0m.png)










## Project-3 The Card Layout

In Project 3, We'll build this ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf2o5njarct4ew24dnqj.png)


Let's start !

## SCSS

On your stylesheet, delete everything, but don't delete the styles of #size. And write these ->

```SCSS
* {
  margin: 0px;
  padding: 0px 10px;
  box-sizing: border-box;

  body {
    font-family: sans-serif;
    font-size: 55px;
  }
}

#size{
  position: absolute;
// Positioning the text
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
// color & size of text
  color: red;
  font-size: 40px;
}

```





## HTML

You're HTML should look like this inside the body tags 👇

```HTML
<div class="container"> 
   // We'll place code here
</div>

// This will show our window width Live 
<div id="size"></div>
```

Now, create 3 classes with class names .row-* like this 👇 inside .container 

```HTML
<div class="container"> 

   <div class="row-1">
   </div>

   <div class="row-2">
   </div>
  
   <div class="row-3">
   </div>
</div>
```

Each row will have 3 boxes with class names .box-* like this 👇
And yes, Insert Letters inside the boxes 


```HTML
<div class="container"> 

   <div class="row-1">
       <div class="box-1">A</div>
       <div class="box-2">B</div>
       <div class="box-3">C</div>
   </div>

   <div class="row-2">
       <div class="box-4">D</div>
       <div class="box-5">E</div>
       <div class="box-6">F</div>
   </div>
  
   <div class="row-3">
       <div class="box-7">G</div>
       <div class="box-8">H</div>
       <div class="box-9">I</div>
   </div>
</div>
```

We're done with the HTML part and the result should look like this 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3jg1iphmhefdpn8gy12.png)


## SCSS

Follow these small baby steps one by one 👇



### Step-1

To select & style all the boxes & rows together, we do these on CSS 👇

```SCSS
.container{
  // styles here 
}

[class ^="row-"]{
  // Styles applied on all rows
}

[class ^="box-"]{
  // Styles applied on all boxes
}
```

### Step-2

Boxes should behave like a row. Write these ->

```SCSS
[class ^="row-"]{
  display: flex;
  flex-direction: row;
}
```

The result 👇

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4utfjrr1bfmwwh81rb1a.png)


### Step-3 

Expand the boxes across the width & height & place the letters at the center. Follow me ->

```SCSS
[class ^="box-"]{

  background-color: #c4c4c4;
  border: 2px solid black;

// Defining the size of the boxes 
  width : (100%)/3;
  height: (100vh)/3;

// Place letter at the center
  display: grid;
  place-items: center;
}
```

The Result -> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4m7snz4kklns6xjinzh.png)


### Step-4


create gap among the rows. Follow me ->


```SCSS
.container{
  display: flex;
  flex-direction: column;
  height: 100vh;

// Creating gap between rows 
  gap: 30px;
}
```


Now to create gap between Boxes ->

```SCSS
[class ^="row-"]{
  display: flex;
  flex-direction: row;

// Creating gap between boxes
  gap : 30px;
}
```

The Result ->

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpus9dx40nxzysz9iceh.png)


### Step-5 -> The mobile Layout 


Create Media query which will be applied at 650px mark

```SCSS
@media (max-width: 650px){
  // We'll write code here
}
```

Change orientation of the boxes on the mobile screen from row to column, and stretch the boxes to 100% of the width ->

```SCSS
@media (max-width: 650px){

//Change orientation
  [class ^="row-"]{
    flex-direction: column;
  }

// Change width of boxes
  [class ^="box-"]{
    width: 100%;
  }
}
```



The Final Result -> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyis7sloasdv03lljhn9.png)





By the way, Project 2 is a part of [this article](https://www.freecodecamp.org/news/learn-flexbox-build-5-layouts/) of mine. If you're interested to learn & practice both about flexbox & media query, then go for it !










# Conclusion <a name = "level-5"></a>

Here's Your Medal For reading till the end ❤️

## Suggestions & Criticisms Are Highly Appreciated ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/usxsz1lstuwry3jlly4d.png)



   * **YouTube[ / Joy Shaheb](https://youtube.com/c/joyshaheb)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**


## Credits 

   * [CSS Tricks](https://css-tricks.com/a-complete-guide-to-css-media-queries/)

   * [Portrait](https://www.pexels.com/photo/woman-wearing-brown-bucket-cap-732425/)

   * [Images from Vecteesy](https://www.vecteezy.com/members/joyshaheb/collections/blog-idea-1)
   * [Panda](https://www.freepik.com/free-vector/cute-panda-hug-boba-milk-tea-cartoon-icon-illustration-animal-drink-icon-concept-premium-flat-cartoon-style_12571361.htm#position=0), & [Ice-cream](https://www.freepik.com/free-vector/kawaii-fast-food-cute-ice-cream-cookie-illustration_5769154.htm#position=1)
   * [Unicorn Pack](https://www.flaticon.com/packs/unicorn-4) & [Kitty Avatar](https://www.flaticon.com/packs/kitty-avatars-3)
   * [instagram](https://www.flaticon.com/free-icon/instagram_1384031),[Twitter](https://www.flaticon.com/free-icon/twitter-sign_25347),[Behance](https://www.flaticon.com/free-icon/behance_254383) and [Dribbble icons](https://www.flaticon.com/free-icon/dribbble-logo_87400)