Media queries in jumbled order

Question

I am working on a website where the css seems horribly disorganised.

The first thing I noticed was the media queries are in the following jumbled order... surely this is wrong? Would it be sensible to reorganise into the right order? Is that possible without huge amounts of work? I want to avoid as much repetition as possible so which would be the right order, could I eliminate some of these breakpoints?

@media screen and (max-width:997px)
@media screen and (min-width:674px) and (max-width:997px)
@media screen and (max-width:997px)
@media screen and (min-width:998px)
@media screen and (max-width:768px)
@media only screen and (min-width: 998px)
@media only screen and (max-width: 997px) and (min-width: 674px)
@media only screen and (max-width: 673px) 
@media print
@media only screen and (max-width: 997px)
@media only screen and (max-width: 768px)
@media only screen and (min-width: 769px) and (max-width: 997px)
@media only screen and (min-width: 674px) and (max-width: 997px)
@media only screen and (max-width: 673px) 
@media only screen and (min-width: 998px)
@media only screen and (min-width: 674px) and (max-width: 997px)
@media only screen and (max-width: 673px) 
@media only screen and (max-width: 551px)
@media only screen and (max-width: 440px)
@media only screen and (max-width: 380px) 
@media screen and (max-width:997px)

Are there CSS selectors in between any of these media queries? If the developer was working with a pre-processor like SASS, they may as well have been using nested media queries with a breakpoint manager like sass-breakpoint, which is then bundled into CSS. — Ben Sewards, Mar 30 '16 at 19:52
something to consider when selecting breakpoints: http://stackoverflow.com/q/8564752/3597276 — Michael Benjamin, Mar 30 '16 at 20:20

score 0 · Answer 1 · answered Mar 30 '16 at 19:47

In your code same @media queries are used multiple times surely you can merge code of them

Secondly, a nice practice is to write @media queries from large to low for ex.

Use @media only screen and (min-width: 998px) at top as it is higher in your code then smaller n smaller.

If you have time so read brief about @media queries here :http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=XIoHGkg8UyR

score 0 · Answer 2 · answered Jul 01 '17 at 06:42

this example might be helpful, Use @media only screen and (min-width:998px) higher to lower.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
</style>
</head>
<body>

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

<div class="row">

<div class="col-3 col-m-3 menu">
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div class="col-6 col-m-9">
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>

<div class="col-3 col-m-12">
  <div class="aside">
    <h2>What?</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Where?</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>How?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
  </div>
</div>

</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Media queries in jumbled order

2 Answers2