CODEWITHSUNDEEP
htmlcss
pedroyanky
pedroyanky

Reputation: 323

how to use min-width in media query

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.

Upvotes: 0

Views: 2218

Answers (3)

Alfalfa
Alfalfa

Reputation: 36

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.

Upvotes: 2

lupz
lupz

Reputation: 3638

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.

Upvotes: 0

Dimitar
Dimitar

Reputation: 182

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

Upvotes: 0

Related Questions