0

Hi guys I was always using a simple media queries scaffold but this time round I'm trying a bit more complex approach. Of course I'm trying to write as much stuff on grid and flexbox, but we all know that websites needs media queries.

So the problem I'm facing is that if I use the below approach I'm forced to set every breaking point in order to achieve the responsive web design.

mobile          -> @media (max-width: 767px)
tablet          -> @media (min-width: 768px) and (max-width: 1024px)
laptop-small    -> @media (min-width: 1025px) and (max-width: 1349px)
laptop          -> @media (min-width: 1350px) and (max-width: 1549px)
desktop-small   -> @media (min-width: 1550px) and (max-width: 1679px)
desktop         -> @media (min-width: 1680px)

Now when I use this method below I was expecting that I can use any of the predefined breaking points and if the breaking point is not set, browser will use any closest one which is set. But in practice they overlapping each other :(

mobile          -> @media (max-width: 767px)
tablet          -> @media (max-width: 1024px)
laptop-small    -> @media (max-width: 1349px)
laptop          -> @media (max-width: 1549px)
desktop-small   -> @media (max-width: 1679px)
desktop         -> @media (min-width: 1680px)

And the third one is working exactly the same as the second one but other way round, and queries are also overlapping each other.

mobile          -> @media (max-width: 767px)
tablet          -> @media (min-width: 768px)
laptop-small    -> @media (min-width: 1024px)
laptop          -> @media (min-width: 1349px)
desktop-small   -> @media (min-width: 1549px) 
desktop         -> @media (min-width: 1680px)

So what I'm doing wrong? The first approach works for me but there is so much hassle to set every element to those breaking points and I think there must be another way. I would like to have a proper media query scaffold and use any breaking point I need so for example first middle one and last one if there is such a need on my design. I just need some suggestions or hints guys.Thanks!

Edit: 28/05/2022 So, this looks like mobile first approach because all outside or below <768px is designated for mobile.

@media (min-width: 768px)
@media (min-width: 1025px)
@media (min-width: 1350px)
@media (min-width: 1550px)
@media (min-width: 1680px)
@media (min-width: 2000px)

Do I'm right here?

Maryando
  • 83
  • 1
  • 6
  • 1
    For your purposes, mixing `min-width` and `max-width` might lead to confusion and potentially unaccommodated dimensions. If going **desktop-first**, go from bigger breakpoints to smaller ones in order and use `max-width` for those. If **mobile-first**, go from smaller breakpoints to bigger ones in order and use `min-width`. See this [SO answer](https://stackoverflow.com/a/7354648/7216508) and [this article](https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries#:~:text=The%20difference%20between%20desktop%2Dfirst,apply%20to%20the%20smallest%20screens.) for more context. – Bumhan Yu May 27 '22 at 18:10
  • Also, to restate the obvious **the order in which you define these break points matter**. In other words, for better predictability and consistency, you'd like to go either ascending or descending order and pick `max-` or `min-` width. – Bumhan Yu May 27 '22 at 18:11
  • @Bumhan Yu, Thanks for the resources and your valuable answer, I'm designing with mobile first-approach but I prefer to work other way round, so build for the desktops first and adjust it going down, maybe seams to be wired but this feels more natural to me. But the outcome is the same so my main CSS styles are reserved only for mobile, so when I get to that point I'm not using the media queries for mobile. So, should I use min-width in this case? The 3rd approach where first media queries is not used but styled in main CSS rules? – Maryando May 27 '22 at 19:32
  • Forget about _mobile-first_ or _desktop-first_ as a concept. As long as you cover all major break points, it really doesn't matter which way you go. You either go from small to large or large to small. "Designing mobile-first, but building desktop-first" sounds like _desktop-first_ to me. It's exactly what [this article](https://joegalley.com/articles/mobile-first-vs-desktop-first-media-queries#:~:text=The%20difference%20between%20desktop%2Dfirst,apply%20to%20the%20smallest%20screens.) outlines in "Desktop-First" section. – Bumhan Yu May 27 '22 at 19:52
  • Again, the order is important. In the article linked above, 1) all rules outside media queries (i.e. above the `media` blocks) will handle the largest viewports. 2) define the second largest with `max-width`, 3) define the 3rd, 4th largest, and on with `max-width` in that order. 4) end with the smallest viewports at the end also with `max-width`. – Bumhan Yu May 27 '22 at 19:54
  • In your case, you want to define all `>1680px` styles _outside_ media query. Then define `>1549px`, `>1359px`, `>1024px`, `>768px` _in this order_. – Bumhan Yu May 27 '22 at 19:56
  • @Bumhan Yu, Thanks yes I read this article, so please see the edited post at the very bottom, this is what I'm using right now and it works really well, also it looks like mobile first as everything outside (below) <768 is mobile. Also I think that mobile first should mainly focus on the content like images which are prepared strictly for mobile, instead of using one big image scaled down and served to desktops and mobile devices, forcing the users to download a huge amount of data, also causing the websites to become a very slow loading beast. – Maryando May 28 '22 at 22:22

0 Answers0