Certain media queries in my code isn't working, any suggestions on how to solve this? For insta-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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>