how to use min-width in media query

Question

I am trying to make a page responsive using the media query min-width. I used the two breakpoints, @media only screen and(min-width: 320px) to display some styles, but the other rule for the other breakpoint is conflicting and overiding the other that is #media only screen and (min-width: 998px). See the code i used

  @media only screen and (min-width: 320px) {
.header {
    display: flex;
    flex-direction: column;
    height: 100px;
    background-color: black;

}
.xpand {
    padding-top: 30px;
}
.searchBar {
    width: 25%;
}
}
  @media only screen and (min-width:990px) {
.header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;s      
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    display: flex;
    -webkt-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

}

#xpand {
    display: none;
}
#brand {
    padding-top: 12px;
    padding-left: 25px;
}
.navBar {
    padding-top: 35px;
    padding-left: 25px;
    margin-left: 16.66666666666667%;
}
.user {
    padding-top: 35px;
    padding-left:25px;
    padding-right: 12px;
    margin-left: 20%;
    cursor: pointer;
}
.searchBar {
    -webkt-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-top: 25px;
    padding-right: 25px;
    margin-left: auto; 
    }

}

I don't know if this is the right way to use the min-width, someone should please show me a way forward.

what is the problem? sometimes its easier to think in max-width for responsive layouts. — xeo, Jan 15 '18 at 15:40
Hello, your question isn't quite clear. It would be useful if you could improve grammar and perhaps add a few screenshots as we're talking about visuals - what do you see and what you expect to see. This is a great general resource on how to ask good questions: Hi, could you please rephrase your question in a way that is more clearly answerable? This is a great resource on how to ask good questions online: http://www.catb.org/esr/faqs/smart-questions.html — Konrads, Jan 15 '18 at 15:42
As I read it, if the width is less than 320, neither \@media block is applies. For 320 to 989, only the first \@media block applies. For 990 and above, BOTH \@media blocks apply, with the 2nd block taking effect in the case of duplicate rules (as it comes later in the source code) — Steve Wright, Jan 15 '18 at 15:44
i'm fine if you want to learn min-width. i just don't understand your problem. typically responsive designs 'break' at certain px widths. which px are you seeing the wrong results at? yes css uses the last rule to override the first rule: https://stackoverflow.com/questions/8790321/why-does-the-order-of-media-queries-matter-in-css — xeo, Jan 15 '18 at 15:51

Alfalfa · Accepted Answer · 2021-11-03T15:03:16.653

2

The order of the code is important in CSS, that means that if there's a duplicate rule, the first rule will be overridden by the second one, so keep this in mind when you apply styles over the same class in different places in your code.

min-width rules will be applied for each resolution higher than the pixels set, and max-width rules will be applied for each resolution below the pixels set.

You can do a combination of both: @media screen and (min-width: 320px) and (max-width: 900px). All the rules in this media query will be applied if the window is wider than 320px but not if it's above 900px.

edited Nov 03 '21 at 15:03

answered Jan 15 '18 at 15:57

Alfalfa

36
5

Thanks for your input, ta better way i presume is to add multiple classess for the elements to be used for the various breakpoints instead of adding it on a single class – pedroyanky Jan 15 '18 at 16:03
Not really, if the problem is that the flex-direction is overridden, just remove this rule from the `min-width` and add a new rule with a `max-width` :) – Alfalfa Jan 15 '18 at 16:08
The first section of your answer was the solution for me. Thy. – gyurielf Nov 02 '21 at 14:56

score 0 · Answer 2 · answered Jan 15 '18 at 15:42

0

You can combine your media query with (max-width) to refine it and avoid overlapping.

answered Jan 15 '18 at 15:42

Dimitar

160
1
1
10

score 0 · Answer 3 · answered Jan 15 '18 at 16:06

The problem is that both media-query rules are applied at the same time.

When the window has a width of 1000px both min-width-queries are accepted because 1000px > 320px and 1000px > 990px.

If you don't want this you could take a look at the max-width media query.

However, I got some code for you to play around with min-width:

<html>
  <head>
  <title>Mediaquery test</title>
  <style>
    .test_override {
      background: red;
    }
    .medium, .large {
      display: none;
    }
    @media (min-width: 500px) {
      .medium {
        display: block;
      }
      .test_override {
        background-color: yellow;
      }
    }
    @media (min-width: 900px) {
      .large {
        display: block;
      }
      .test_override {
        background-color: green;
      }
    }
  </style>
</head>

<body>
  <div class="test_override">TEST</div>
  <div class="medium">medium</div>
  <div class="large">large</div>
</body>

</html>

You can see that on window sizes > 900px both divs (.medium and .large) are displayed.

You can override properties like I did for the background-color of the .test_override div. The order of the rules in the code does matter in this case.

how to use min-width in media query

3 Answers3