Responsive Design Fail - css

Question

I am having an issue with trying to figure out why the header on my mobile format isn't showing up.... can anyone see something I can't?? I have been trying for two weeks and I must be missing something. It appears that my larger version is working just fine, but I would appreciate any help I can get with this problem. Thank you.
/* very small mobile styles */
#media only screen and (max-width: 320px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 0;
margin: 0;
}
main img {
max-width: 300px;
height: auto;
padding: 0;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
font-weight: bold;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 0.75em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* mobile portrait styles */
#media only screen and (max-width: 768px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header {
display: none;
}
.container-header-mobile {
height: 260px;
width: 100%;
text-align: center;
position:relative;
color: #682876;
background-color: white;
padding: 0;
}
.container-header-mobile img {
max-height: 100px;
min-height: 50px;
width: auto;
}
.container-header-mobile a {
text-decoration: none;
padding: 0 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 5px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 1em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 0.5em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
.bot-social img {
border-radius: 18px;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* laptop styles */
#media only screen and (max-width: 1024px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 370px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* large laptop styles */
#media only screen and (max-width: 1362px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
width: 236px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* desktop styles */
#media only screen and (max-width: 1440px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 500px;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
/* HD styles */
#media only screen and (min-width: 1441px) {
html,
body {
margin: 0;
width: auto;
background-color: #682876;
}
.container-header-mobile {
display: none;
}
.container-header {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
}
.container-header a {
text-decoration: none;
padding: 0 5px;
}
.container-header img {
max-height: 230px;
width: auto;
padding-right: 12%;
}
.bot-social {
display: none;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.top-left img {
padding: 5px;
}
main {
text-align: center;
color: white;
padding: 15px 2%;
margin: 0;
}
main img {
max-width: 300%;
height: auto;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
}
figcaption {
position: absolute;
font-family: "Montserrat", sans-serif;
font-size: 1.5em;
background: rgba(104, 40, 118, 0.5);
color: #ffffff;
padding: 20px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 1;
left: 0;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
h1 {
font-family: "Caveat", cursive;
font-weight: lighter;
font-size: 2em;
}
p {
font-family: "Montserrat", sans-serif;
font-size: 1em;
}
main a {
color: white;
text-decoration: none;
}
.bot-social {
margin: auto;
}
footer {
color: white;
text-align: center;
margin: 0;
padding: 10px;
}
footer a {
color: white;
text-decoration: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Volume Salon Westlake</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Caveat|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container-header">
<div class="top-left">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo">
<div class="top-right">
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</div>
<div class="container-header-mobile">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/header.jpg" alt="VS Logo"><br>
<p><b>26101 Center Ridge Rd. Westlake, OH 44145</b></p>
</div>
</header>
<main>
<div>
<h1>Volume Salon, located in Westlake, Ohio is... To view offered services and schedule an appointment with one of our independent sylists, visit the links below:</h1>
</div>
<div>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nikki.png" alt="Nikki">
<figcaption>Nikki</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kevin.png" alt="Kevin">
<figcaption>Kevin</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/kelley2.png" alt="Kelley">
<figcaption>Kelley</figcaption>
</figure>
<figure class="cap-bot">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/anne-marie.jpg" alt="Anne-Marie">
<figcaption>Anne-Marie</figcaption>
</figure>
</div>
<div class="bot-social">
<a href="https://www.facebook.com/volumesalonwestlake/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/FB-f-Logo__blue_29.png" alt="Facebook">
</a>
<a href="https://www.instagram.com/explore/locations/1732209880415699/volume-salon/" target="_blank">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/glyph-logo_May2016.png" alt="Instagram">
</a>
</div>
<br><br><br>
</main>
<footer>
<p>© 2018 Volume Salon</p>
<p>Made with ♥ by Valarie Pisarcik</p>
</footer>
</body>
</html>

Answer 1

your header doesn't show up in width fewer than 320px because you set dispaly: none.
.container-header {
display: none;
}
please change it to :
.container-header {
display: block;
}

Answer 2

See if this helps you:
https://codepen.io/panchroma/pen/NBaNXv
Remember that CSS code cascades. If your stylesheet has
.element{
display:block;
}
.....
.element{
display:none;
}
then the display property for .element will be none.
In your CSS code you have
#media only screen and (max-width: 320px) {
.container-header-mobile {
height: 260px;
width: 100%;
position: relative;
text-align: center;
color: #682876;
background-color: white;
padding: 0;
}
}
...
#media only screen and (max-width: 1024px) {
.container-header-mobile {
display: none;
}
}
There are two ways to stop one media query from overriding another.
In my pen I modified your media queries by adding a (min-width) to each of them, eg
#media only screen and (max-width: 320px) {
...
}
#media only screen and (min-width: 321px) and (max-width: 768px) {
...
}
#media only screen and (min-width: 769px) and (max-width: 1024px) {
...
}
the other option is to reverse the order of your media queries, have the desktop viewport first and the mobile viewport last:
#media only screen and (min-width: 1441px) {
...
}
#media only screen and (max-width: 1440px) {
...
}
#media only screen and (max-width: 1362px) {
...
}
Hope this helps!