'Certain media queries in my code isn't working, any suggestions on how to solve this? For instance the 320px and the 360px media query isn't working

The 320px media query is not working. The 360px media query is not working. But the other media queries are working. Any suggestions on how to resolve this?

    body {
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;
}

.topnav {
    background-color: #333;
    width: 100%;
    position: fixed;
    top: 0px;
    margin-left: -9px;
}

.topnav a:hover {
    background-color: darkgreen;
    color: white;
    text-decoration: underline;
}

nav {
    margin: 33px;
    margin-top: 32px;
}

img#logo {
    width: 101px;
    float: left;
    margin-top: -15px;
    margin-left: -20px;
}

a.active {
    background-color: #04aa6d;
    color: white;
    text-decoration: none;
}

nav a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 14px;
    text-decoration: none;
    font-size: 17px;
}

a.icon {
    display: none;
}

#right {
    float: right;
    margin-top: -16px;
}

.pastor {
    width: 1000px;
    margin-left: 275px;
    margin-top: -231px;
}

hr {
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;  
}

ul {
    list-style-type: none;
}

#li {
    float: right;
    margin-top: -49px;
    margin-right: 15px;
}

li#li {
    padding: 10px 20px;
}

li#li a {
    color: whitesmoke;
    background-color: #04AA6D;
}

li#li a:hover {
    color: black;
}

#figure {
    display: flex;
    justify-content: center;
}

figure figcaption {
    text-align: center;
}

#events {
    background-color: #0193de;
    text-align: center;
}

.figure {
    text-align: center;
    display: inline-block;
    margin-left: auto;
    width: 350px;
    height: 424px;
}

.figure img {
    width: 350px;
    height: 424px;
}

figure figcaption {
    color: white;
}

#footer {
    background-color: #333;
    text-align: center;
    color: white;
}

#footer a{
    color: green;
}

#footer a:link {
    color: white;
}

#footer a:visited {
    color:  white;
}

#footer a:hover {
    background-color: darkgreen;
    text-decoration: underline;
}

#marg {
    margin-top: 25px;
    display: block;
}

/*This is the gallery section*/

#figs.figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.figures figcaption {
    color: black;
}

#pictures {
    background-color: #12954b;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pictures img {
    height: 700px;
    width: 437px;
}

#pictures figcaption {
    color: white;
}

/*This is the donate section*/

   .dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
}

.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

abbr {
    text-decoration: underline;
}

/*This is the contact section*/
.margin {
    margin-top: 100px;
    text-align: center;
}

.margin2 {
    text-align: center;
}

input:focus {
        border: 3px solid #0193de;
    }
    input {
        width: 51%;
        padding: 12px 20px;
        margin: 8px 1px;
        box-sizing: border-box;
        border-right-color: #0193de;
    }
   textarea {
        width: 51%;
        height: 100px;
        padding: 12px 20px;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        resize: none;
        border-right-color: #0193de;
    }

.submit {
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    }
    .reset {
      background-color: red;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px;
      cursor: pointer;
      width: 50.8%;
    }

@media screen and (min-width: 320px) {
body {
    font-family: "Trebuchet Ms", Cambria, "Times New Roman",  sans-serif;
}
.topnav {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    top: 0px;
    margin-left: -9px;
}
.topnav a{
    float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
    background-color: #04AA6D;
    color: black;
    text-decoration: underline;
}
.topnav a.active {
    background-color: darkgreen;
    color: white;
}

.topnav a:visited {
    color: dodgerblue;
}

.topnav .icon {
    display: none;
}
img#logo {
    width: 70px;
}

nav {
        margin: 12px;
    margin-top: 0px;
}

#right {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-right: 79px;
}

#p {
    display: inline-block;
}

.pastor {
    width: 300px;
    margin-top: -26px;
    margin-left: 23px;
}

hr {
    width: 100%;
    border-top: 3px double #0193de;
    margin: 50px 0px 50px;
}

ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
}

#il {
    margin-left: -34px;
    margin-top: -2px;
}

#li {
    float: right;
    margin-top: 20px;
    margin-right: 2px;
}

#li a {
    text-align: center;
    color: whitesmoke;
    background-color: #04AA6D;
}

li#li {
    padding: 0px;
}

#figure {
    display: flex;
    flex-direction: column;
}

.iframe {
    margin-left: 0px;
    width: 250px;
}

#figure figcaption {
    color: black;
}

figcaption {
    text-align: center;
}

#events {
    background-color: #0092dc;
    text-align: center;
}

.figure {
    margin-left: 25px;
    width: 250px;
}

.figure img {
    width: 350px;
    margin-left: 0px;
}

.figure figcaption {
    color: white;
    text-align: center;
}

#footer {
    background-color: #333;
    text-align: center;
    color: white;
}

#marg {
    display: block;
    margin: 20px 0px;
}

#downnavbar a:link {
    color: white;
}

#downnavbar a:visited {
    color: dodgerblue;
}

#downnavbar a:hover {
    text-decoration: underline;
}

#downnavbar a {
    text-decoration: none;
}

#downnavbar a.active {
    background-color: transparent;
}

#downnavbar a:hover {
    background-color: transparent;
}

#marg .fa-brands{
    color: #269f5b;
}

#footer address a {
    color: green;
}

address {
    margin-top: 10px;
}

@media screen and (min-width: 320px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (min-width: 320px) {
    .topnav.responsive {
        position: fixed;
        width: 361px;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a{
        float: none;
        display: block;
        margin-top: 21px;
    }
}
}
@media screen and (max-width: 360px)
@media screen and (max-width: 412px)
@media screen and (min-width: 414px)
@media screen and (min-width: 428px)
@media screen and (min-width: 768px)
@media screen and (min-width: 800px)
@media screen and (min-width: 820px)
@media screen and (min-width: 834px)
@media screen and (min-width: 884px)

The 320px media query is not working. The 360px media query is not working. But the other media queries are working. Any suggestions on how to resolve this?

Solution 1:^[1]

If you have them in the order like in your question, it's clear: The max-width: 412px will overwrite the 320 and 360 max-width: For example max-width: 412px also applies to a screen that's 310px wide. You need to rearrrange the order to avoid that.

Solution 2:^[2]

CSS is read from top to bottom - this means that the last property applied to your selector will take priority, as long as its valid. This means that a more "precise" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. Because of this, you should always make media-query-rules with:

A descending pixel value if you're using max-width

An ascending pixel value if you're using min-width

In this example, the min-width-media-queries below the max-width-media-queries

This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.

div {
  width: 150px;
  height: 150px;
  background-color: red;
}

@media screen and (max-width: 412px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 360px) {
  div {
    background-color: yellow;
  }
}

@media screen and (min-width: 320px) {
  div {
    background-color: orange;
  }
}

@media screen and (min-width: 414px) {
  div {
    background-color: black;
  }
}

@media screen and (min-width: 428px) {
  div {
    background-color: purple;
  }
}

@media screen and (min-width: 768px) {
  div {
    background-color: pink;
  }
}

@media screen and (min-width: 800px) {
  div {
    background-color: gray;
  }
}

@media screen and (min-width: 820px) {
  div {
    background-color: limegreen;
  }
}

@media screen and (min-width: 834px) {
  div {
    background-color: blue;
  }
}

@media screen and (min-width: 884px) {
  div {
    background-color: teal;
  }
}

<div></div>

Solution 3:^[3]

Let's just go through the media queries one by one and see where we end up.

Here are the queries (doesn't matter what's in them for now). (As long as that spurious curly right brace has been removed from just before the 360px media query).

OK suppose I'm sitting on a very narrow viewport - let's say 250px.

@media screen and (min-width: 320px)

Yes, I pass this test so whatever is in here will get applied

@media screen and (max-width: 360px)

Oh, I have passed this test too so whatever is in here will get applied (and override some stuff from the previous media query)

@media screen and (max-width: 412px)

Lo! I have passed this test so anything set here will override previous settings

@media screen and (min-width: 414px)

Ah, I've failed this one so nothing in here applies

@media screen and (min-width: 428px)

And I've failed this one too

@media screen and (min-width: 768px)

And I've failed this one.

@media screen and (min-width: 800px)

Failed

@media screen and (min-width: 820px)

Failed

@media screen and (min-width: 834px)

Failed

@media screen and (min-width: 884px)

Failed

So by the end the styles that I have are those for anything up 412px width.

And the same will be true if my width is 360px or less (apart from failing the first test).

So for max tests you are going to have to put them the other way round. Here's a shortened version for a 320px or less viewport:

@media screen and (max-width: 412px)

Lo! I have passed this test so anything set here will override previous settings

@media screen and (max-width: 360px)

Oh, I have passed this test too so whatever is in here will get applied (and override some stuff from the previous media query)

@media screen and (min-width: 320px)

Yes, I pass this test so whatever is in here will get applied (and override any similar settings from the previous)

So, that should be fine for 320px Try it yourself for 360px.

Now, are the mins the right way round? None of them will be satisfied by a viewport of less than 414px so the 320px and the 360px won't be affected.

Let's suppose I'm on a viewport with width 440px.

@media screen and (min-width: 414px)

Passed so the settings will be applied

@media screen and (min-width: 428px)

Passed so the settings fill be applied, overriding any of the same already set

@media screen and (min-width: 768px)

I've failed this one.

@media screen and (min-width: 800px)

Failed

@media screen and (min-width: 820px)

Failed

@media screen and (min-width: 834px)

Failed

@media screen and (min-width: 884px)

Failed

So that would seem to be OK.

Remember that CSS is named cascade for a reason, the last applicable setting will be the one that 'sticks'.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Johannes
Solution 2
Solution 3	A Haworth

'Certain media queries in my code isn't working, any suggestions on how to solve this? For instance the 320px and the 360px media query isn't working

The 320px media query is not working. The 360px media query is not working. But the other media queries are working. Any suggestions on how to resolve this?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]