Sharing my go-to media queries!
Tags: codenewbie, css, mediaquery
Published: 2021-06-22 23:08:13

Hi! In this blog I'm going to talk about what are my go to media query combinations to get my projects as responsive as I can while learning how to use them.

If you're a code newbie like I am, let's learn together! If you're more advanced, let me know what's you go to resources because I want to learn more!

<img src="https://media.giphy.com/media/a7NBvg3Ss8UYo/giphy.gif" alt="get your learn on"/>

#### First, What is media query?
Best I can describe it in layman terms is that media query is a CSS technique or a way for you to manipulate elements/media on the DOM inline with a set breakpoint where those design elements will behave differently per breakpoint you set.

```CSS
YES! You can manipulate elements on the DOM with it! 
A couple of ways to do so is through HTML, CSS or JavaScript.
```

My go-to route is CSS, but can definitely use combination of all.

#### Here are my go-to media query combinations:
I use all of them on the projects I'm working on and I am currently updating my old projects using these. 


```CSS
SIZES MAY VARY DEPENDING ON WHAT DEVICES YOU WANT TO FOCUS ON

/*low resolution tablets, mobiles (portrait)*/
@media (min-width: 320px) and (max-width: 480px){

}


/*low resolution tablets, mobiles (landscape)*/
@media (min-width: 481px) and (max-width: 767px){
}


/*tablets, ipads (portrait)*/
@media (min-width: 768px) and (max-width: 1024px){

}


/*tablets, ipads (landscape)*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

}
```

Want to see it in action? Let's us one of my web apps as example. 
*ALL SCREENGRABS AND TOGGLED MOBILE VIEWS BELOW ARE FROM USING THE CONSOLE FROM MY BROWSER.*

By default, of course we'll start off with the desktop version of our webapp. 

![desktop version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pdq7k8vc29bv5foartw.png)- Noticed from here, I already have a set CSS for the element with a class 'profile_sideNav'.
* * *

```CSS
NOW, ADDING OUR PORTRAIT LOW-RES MOBILE & TABLET MEDIA QUERY
@media (min-width: 320px) and (max-width: 480px){  
}
```
![Mobile portrait](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qd3rbsf1ofk6rdz6qhx.png)-See that some values have changed and some new ones got added. But still using the same CSS selector of that element manipulated.


```CSS
WE CAN SAY THE SAME FOR LANDSCAPE, KEEPING THE SAME VALUES
@media (min-width: 481px) and (max-width: 767px){
}
```
![Mobile Landscape](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg7s9vkmh1zvsv8huchm.png)


```CSS
WHAT ABOUT PORTRAIT TABLETS YOU SAY?
@media (min-width: 768px) and (max-width: 1024px){

}
```
![Portrait tablet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6zwiq8ao1qg7swpk5du.png)


```CSS
YES-CAN-DO FOR IPADS AND TABLETS ON LANDSCAPE TOO!
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){
}
As you noticed values are the same from portrait to landscape. 
You might be wondering why declare if its the same values?
```
![Landscape on a tablet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7lqxpk5gfb8bycm6ll3.png)-As per my experience, we would still need to do that if you don't want the desktop version values to dominate.

I have learned during this process to do mobile first when it comes to formulating media queries and go by element/component. For me, it's easier to follow and has less clutter on my workflow.

I saw great anatomy breakdown for the role of each of those sizes from [CSS-tricks guide to media query](https://css-tricks.com/a-complete-guide-to-css-media-queries/#anatomy-of-a-media-query). I am showing how mines turn out for the hopes that I can help another codenewbie like me that is starting out to learn media query. 

**Hope this helped anyone seeing the differences it made on my app!**

References:
[CSS Tricks](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
[Query generator](https://simplecss.eu/)
[SplashGlam](https://splashglam.herokuapp.com/) - My skincare webapp used for the demo.

Until the next!