Unresponsive Media Query

Question

Why won't my media query for min-width: 568px and min-width: 500px respond to the styles I set? The other two media queries work just fine.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
 <title>Sat9</title>
 <link rel='stylesheet' href='css/normalize.css'>
 <link rel='stylesheet' href='css/style.css'>
 <link rel="icon" href="img/IMG_1394.JPG">
 <link href="https://fonts.googleapis.com/css?family=Montserrat|Orbitron|Roboto|Amatic+SC" rel="stylesheet" type="text/css">
 <link rel="icon" href="img/IMG_1320.JPG">
 <script src="https://apis.google.com/js/platform.js" async defer></script>
</head>

  <body>

  <div class='wrap'>
 ------------- <header class='sat-main-header'>----------------
  <div class='sat-container'>
  # <h1 class='sat-name'><a href='thehairwars.html'> Satellite Nine Media</a></h1>#
  </div>

  </header>



    <div class='sat-banner'>
        <div class='ref'>   <img src='img/sat.JPG' alt="City">
        </div>
        #<h1>Discover Your Audience</h1>#

    </div>

    <div class='port-title'>
  # <h1 class="port-head"> The Hair Wars</h1>#
# <h1 class="port-head2"> People Pages Review</h1>#
    </div> 

    <div class="port-img">

   <a href='thehairwars.html'> <img class='port-img0' src="img/icon-logo.JPG"/> </a>

    <img class='port-img1' src="img/IMG_1395.JPG"/>

    </div>

    <div class='video'>

       <iframe width="640" height="360" src="https://www.youtube.com/embed/MsU-OUfRpKk" frameborder="0" allowfullscreen></iframe>

      <iframe width="640" height="360" src="https://www.youtube.com/embed/Io-CefWMmoQ" frameborder="0" allowfullscreen></iframe>


      </div>






       <div class='video1'>

<iframe width="760" height="360" src="https://www.youtube.com/embed/0MPbbDbrWMA" frameborder="0" allowfullscreen></iframe>

  </div>

     <div class='video'>

       <iframe width="640" height="360" src="https://www.youtube.com/embed/GErY6yJvV84" frameborder="0" allowfullscreen></iframe>

      <iframe width="640" height="360" src="https://www.youtube.com/embed/UFVS40ypZWs" frameborder="0" allowfullscreen></iframe>


      </div>

    </div>






  <footer>
  </footer>
  </body>

</html>

CSS

* {
    box-sizing: border-box;
}


body {
    line-height: 1.6;
    color: #3a3a3a;
}

a {
    text-decoration: none;
}

img
{
width: 100%;


}


   h2
{
padding-left: 2em;
padding-right: 2em;
}


figure {
    margin: 0;
    line-height: 0;
    position: relative;
}

figcaption 
{
    font-size: .9em;
    line-height: 1.5;
  font-weight: bold;

    color:  black;
    padding: 1em;   
    background-color: white;


    position: absolute;
  left: 15em;
    bottom: 5em;
    width: 39%;
}






.fig2 
{
    font-size: .9em;
    line-height: 1.5;
  font-weight: bold;

    color:  black;
    padding: 1em;   
    background-color: white;
  opacity: .65;


    position: absolute;
  left: 9.2em;
    bottom: 5em;
    width: 48%;
}


.main-header 
{

text-align: center;
}

.banner 
{
text-align: center;
position: relative;
}



 .name 
{
font-size: 1.45em;
color: #ff1d8e;

}





.name, .main-nav,
.main-nav li 
{

background: #fff;
display: inline-block;


 }

.main-nav
{
padding-left: 1em;

}

.main-nav a {
    font-size: .95em;
    color: #ffc3e1;
    text-transform: uppercase;
}

.main-nav a:hover {
    color:  #ff87c3;
}

.container {
    padding-left: 1em;
    padding-right: 1em;
  position: relative;


}

.port-head
{
margin-left: 35%;

}

.ref img
{
width: 100%;
height: 80%;
border: 5px solid black;

}



.sat-main-header
{
margin-top: 1%;
background-color: #fff;
height: 4em;
position: relative;

}

.sat-container
{
position: absolute;
top: -2.5em;
left: 3em;



}




.port-title h1
{

font-size: 25px;
display: inline-block;
margin-left: 2.5%;
padding-left: .65%;
border-left: .05em solid grey;

}

.port-img img
{
display: inline-block;


}




.headline
{
color: black;
font-size: 4em;
background-color: white;
width: 80%;

position: absolute;
top: 1em;
left: 2.1em;
}

.tagline
{
color: white;
font-size: 2.5em; 

position: absolute;
top: 5.3em;
left: 12.6em;
}

.main-footer 
{
background-color: #ff1d8e;
height: .5em;
}

.masterkeep
{
 display: flex;
text-align: center;
margin-right: 10%;
}


figure
{
overflow: hidden;
}

.feat-img
{
transition: all .3s ease;

}

.feat-img:hover
{
transform: scale(.95)
}

.feat-img-1
{
transition: all .3s ease;
}

.feat-img-1:hover
{
transform: scale(.95);


}






.icon-logo
{
width: 4.8%;
position: absolute;
top: 1em;
left: 57.5%;
border-radius: 100%;


}

.icon-logo-1
{
width: 6.3%;
position: absolute;
top: 1em;
left: 18.7em;
border-radius: 100%;


}

.topic
{
font-size: 1em;
padding-left: 2.8em;


}

.title-ref
{
color: purple;

}

  .art-img
{
max-width: 30%;
margin-left: 34.5%;


}

.business
{
padding-top: .9em;
padding-left: 1.8em;
padding-right: 1.8em;
padding-bottom: 2.3em;
}.



___________________unresponsive media query_________________
@media screen and (min-width: 568px),
       only screen and (min-width: 500px) and (orientation: landscape)
    {

.sat-container
  {
  left: 7em;


  }

  .icon-logo
  {
  top: 10%;
  width: 11%; 
  }


 .icon-logo-1
  {

  width: 50%;
  top: 80%;
  }




}

-------------------------------------------------------------------------------------------------------------------------------------------------------------------





@media only screen and (min-width: 768px),
       only screen and (min-width: 700px) and (orientation: landscape)
    {
.wrap
{
min-height: calc(100vh - 24px);
 }

  .name a
  {
  color: #ff1d8e;

}

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }

  .sat-main-header
  {
  height: 4.1em;


  }

.sat-name a
{


font-family: 'Orbitron', sans-serif;
font-size: 1.2em;
letter-spacing: .09em;
color: black;

}


.sat-container
  {
  top: -29%;
  left: 16em;


  }
.sat-name h1
{
bottom: 1.5em;
left: 3em;
}  


  .sat-banner h1 
{
font-size: 3.2em;
position: absolute;
top: 4.3em;
left: 6.7em;

font-family: 'Amatic SC', cursive;
font-weight: bolder;
color: white;  


}

  .port-title 
{
text-align: center;

}


  .port-img
{
margin-left: 35%;


}


.port-img0
{
margin-bottom: 7%;
width: 18%;

}


.port-img1
{
margin-bottom: 3.5%;
margin-left: 11%;
width: 25%;

}

.video
  {


  margin-left: 17%;


  }

  .video iframe
  {
    margin-top: 2%;

  }

  .video1 iframe
  {
  max-width: 65%;
  max-height: 95%;
  margin-top: 2%;
  margin-left: 17%;

  }



.headline 
{
left: 1.4em;

}

.tagline
{
left: 32%;


}

.feat-img
{
padding-top: 2em;
max-width: 75%;
margin-left: 5%;

}

.feat-img-1
{
padding-top: 2em;
max-width: 100%;
margin-left: 2.5%;
}


  .icon-logo
  {
  width: 10%;
  left: 73%;

  }

  .icon-logo-1
  {
  width: 13.4%;
  top: 10%;
  left: 75%;
  }

  figcaption
  {
  font-size: 20px;
  left: 15%;
  width: 80%;
  color: #ff1d8e;  

  }

  .fig2
  {
  font-size: 20px;
  left: 3%;
  width: 100%;
  color: #ff1d8e;

  }




}





@media (min-width: 1025px) {





.sat-main-header
{
height: 2em;

}


.sat-name a
{
font-family: 'Orbitron', sans-serif;
font-size: .6em;
letter-spacing: .09em;
color: black;

}



.sat-name h1
{
bottom: 1.5em;
left: 3em;
}

.name a 
{
color: #ff1d8e;

}



.sat-container
{
 top: -2.4em;
left: 3em;

}

.sat-banner h1 
{
font-size: 3.2em;
position: absolute;
top: 5em;
left: 10.3em;

font-family: 'Amatic SC', cursive;
font-weight: bolder;
color: white;  


}



.port-title 
{
text-align: center;

}

.port-img
{
margin-left: 37%;


}

.port-img0
{

margin-right: 4.6%;
margin-bottom: 9%;
width: 16.5%;

}


.port-img1
{

margin-left: 3%;
margin-bottom: 5%;
width: 25%;

}

.video 
{
display: flex;
margin-left: 3%;
}


.video1
{
margin-left: 2.5%;


}

.video1 iframe
{
width: 100%;
}



.headline
{
  left: 1.8em;

}

.tagline
{
left: 12.1em;

}

.feat-img
{
max-width: 31.8%;
padding-bottom: 2em;

}

.feat-img-1
{
max-width: 43%;
padding-bottom: 2em;


}



 .icon-logo
  {
  width: 5%;
  top: 14%;
  left: 60%;
 }


  .icon-logo-1
{
width: 6.8%;
top: 15.5%;
left: 61.2%;

}

  figcaption
  {
  font-size: 15px;
  left: 15%;
  width: 80%;
  color:  #ffc3e1;  

  }

  .fig2
  {
  font-size: 15px;
  left: 3%;
  width: 100%;
  color:  #ffc3e1;

  }




}

Answer 1 · 2016-11-09T07:33:58Z

November 9, 2016 7:33am

make sure you didn't typo in your html and css.

You have to read up on how position works. https://developer.mozilla.org/en-US/docs/Web/CSS/position

If not I would download the solution and compare your script to see where you typo-ed. If not copy and paste your code in js fiddle so I can help or push it up to github.

Answer 2 · 2016-11-29T21:02:53Z

November 29, 2016 9:02pm

Hey Killeon Patterson,

It has to do with how you're writing the comments in your CSS -- some are canceling out CSS rules. Take a look at a tool like CSSLint to help you catch the problems in your CSS. :)

Answer 3 · 2016-12-12T16:03:23Z

December 12, 2016 4:03pm

Killeon Patterson

Can you post your code again? It's difficult to debug the issue if the code above isn't what you're currently using. A good technique is to create a Workspace "snapshot" and share it here in the forum. If you don't know how to create a workspace snaphot this video -- https://teamtreehouse.com/library/previews-and-snapshots -- explains it.

You could also post your code online on a site like codepen.io.

Answer 4 · 2016-12-12T16:13:45Z

December 12, 2016 4:13pm

Hey Killeon Patterson,

Take a look at the .buisness selector in your css:

.business {
   padding-top: .9em;
  padding-left: 1.8em;
  padding-right: 1.8em;
  padding-bottom: 2.3em;
}.

After the closing curly brace you'll see an extra . character that could be throwing off the media query below it. :)

Welcome to the Treehouse Community

Looking to learn something new?

Killeon Patterson

Killeon Patterson

Unresponsive Media Query

4 Answers

jason chan

jason chan

Killeon Patterson

Killeon Patterson

Guil Hernandez

Guil Hernandez

Killeon Patterson

Killeon Patterson

Dave McFarland

Dave McFarland

Guil Hernandez

Guil Hernandez