So I am trying to validate my website and keep getting a parse error for one of my media queries section of my style sheet. When I just copy and paste that section of code into the W3 CSS Validator it shows its fine but when the whole sheet is up it finds an error somewhere in there. Here is what I have:
/* CSS Document for:
Chris Quantrell: Illustration, Graphic and Web Design
By: Chris Quantrell
*/
.primaryContainer {
height: auto;
margin-left: auto;
margin-right: auto;
min-height: 100%;
background-image: url(../img/[email protected]);
background-attachment: scroll;
background-size: auto;
background-size: auto;
background-position: 0% 0%;
background-repeat: repeat repeat;
font-family: source-sans-pro, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
font-size: 16px;
color: rgba(18, 18, 18, 1.00);
}
#logo_container {
float: none;
height: auto;
margin: 12px;
clear: none;
width: 1050px;
min-width: 0px;
margin-left: auto;
margin-right: auto;
}
#bear_logo {
float: left;
width: 100%;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
color: rgb(0, 0, 0);
min-width: 0px;
}
#contact_info_stripe {
background-color: #E2231A;
width: 100%;
}
#contact_info_box {
float: none;
height: auto;
margin-left: auto;
margin-top: 0px;
clear: none;
width: 1050px;
margin-right: auto;
background-color: #E2231A;
padding: 10px;
color: white;
text-align: right;
font-size: 140%;
}
/* about me section */
#about_me_box {
float: none;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
clear: none;
width: 1050px;
min-height: 0px;
padding-left: 157px;
padding-right: 10px;
background-color: white;
background-image: url(../img/bear_aboutme.png);
background-size: 100%;
background-repeat: no-repeat;
}
#about_me_box p {
width: 575px;
height: auto;
margin-left: auto;
margin-top: 0px;
text-align: justify;
padding: 10px;
font-size: 110%;
}
/* Gallery Stuff */
#gallery_container {
float: none;
height: auto;
margin: 0px auto;
clear: none;
width: 1050px;
min-height: 0px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 100px;
background-color: white;
}
.gallery_cell {
width: 320px;
height: 320px;
float: left;
margin: 10px;
display: block;
border: thick #F00;
}
a:hover.gallery_cell {
border: 10px rgba(255, 0, 4, 1.00);
}
/* Button Stuff */
.button {
display: block;
height: 80px;
width: 275px;
background: #E2231A;
font-weight: 800;
font-size: 200%;
color: white;
text-align: center;
padding-top: 16px;
float: right;
margin-left: 16px;
margin-bottom: 16px;
}
a.button {
text-decoration: none;
}
a:visited.button {
text-decoration: none;
color: white;
}
a:hover.button {
color: white;
}
/* Headline Section */
h1 {
font-size: 360%;
font-weight: 900;
text-align: right;
}
h2 {
font-size: 160%;
font-weight: 500;
margin-top: 0px;
margin-bottom: 4px;
}
h3 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-bottom: -10px;
color: #E2231A;
text-align: right;
margin-right: 12px;
}
h4 {
font-size: 200%;
font-weight: 800;
margin-top: 32px;
margin-right: 10px;
color: #E2231A;
text-align: right;
margin-bottom: 12px;
}
/* Tablet Styles */
@media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
/*Phone Styles*/
@media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
@media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}You aren't closing the tablet styles @media with a }.
/* Tablet Styles */
@media only screen and (max-width: 1049px) {
.primaryContainer {
background-image: url(../img/shattered.png);
}
#logo_container {
width: 100%;
margin-bottom: 12px;
}
#contact_info_box {
width: 100%;
}
#about_me_box {
width: 100%;
padding-right: 10px;
padding-left: 20%;
background-size: 60%;
background-position: left 36px;
}
#about_me_box p {
width: 100%;
padding-left: 10%;
}
.button {
width: 43.5%;
margin-left: 1%;
margin-right: 1%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 98%;
margin-left: 1%;
margin-right: 1%;
float: left;
margin-top: 0px;
clear: none;
}
#gallery_container {
width: 100%;
}
#gallery_grid {
margin-left: auto;
margin-right: auto;
display: block;
}
.gallery_cell {
width: 30%;
height: 30%;
margin-left: 1%;
margin-top: 15px;
}
} /* <- Missing that */
/*Phone Styles*/
@media only screen and (max-width: 640px) {
#logo_container {
margin-top: 4px;
margin-left: 1%;
clear: none;
width: 98%;
margin-right: 1%;
}
#about_me_box {
margin-right: 1%;
margin-left: 1%;
padding-left: 1%;
padding: 1%;
width: 98%;
background-image: none;
}
#about_me_box p {
width: 98%;
margin-left: 1%;
margin-right: 1%;
padding-left: 0px;
}
.button {
width: 100%;
height: 54px;
font-size: 150%;
padding-top: 10px;
}
#bear_logo {
width: 100%;
}
#contact_info_box {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
#gallery_container {
width: 98%;
margin-right: 1%;
margin-left: 1%;
padding: 1%;
}
.gallery_cell {
width: 48%;
height: 48%;
margin-left: 1%;
margin-right: 1%;
margin-top: 8px;
}
}
@media only screen and (max-width: 400px) {
.gallery_cell {
width: 98%;
height: 98%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
}
}
It now validates at the the W3C validator