Expected LBRACE

[BigDingus]

Hi folks.

I keep getting Expected LBRACE after I use @media in my CSS.

Has anyone come across this?

My CSS:

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

.box3 {
float: left;
text-align: center;
height: 300px;
width: 25%;
margin-left: 30px;
margin-top: 20px;
background-color: #FFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
table-layout: fixed;
border-top: solid 50px;
border-top-color: #494949;
}
.box4 {
text-align: center;
height: 300px;
width: 25%;
margin-left: 30px;
margin-right: 30px;
margin-top: 20px;
background-color: #DFFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
border-top: solid 50px;
border-top-color: #494949;
}
.box5 {
float: right;
text-align: center;
height: 300px;
width: 25%;
margin-right: 30px;
margin-top: 20px;
background-color: #FFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
border-top: solid 50px;
border-top-color: #494949;
}

[Jon Fritz · Accepted solution]

You are missing an opening brace after your media query line and a closing brace at the end of the css contained within it (in red below)...

@media screen and (max-width: 400px) {

.box3 {
float: left;
text-align: center;
height: 300px;
width: 25%;
margin-left: 30px;
margin-top: 20px;
background-color: #FFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
table-layout: fixed;
border-top: solid 50px;
border-top-color: #494949;
}
.box4 {
text-align: center;
height: 300px;
width: 25%;
margin-left: 30px;
margin-right: 30px;
margin-top: 20px;
background-color: #DFFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
border-top: solid 50px;
border-top-color: #494949;
}
.box5 {
float: right;
text-align: center;
height: 300px;
width: 25%;
margin-right: 30px;
margin-top: 20px;
background-color: #FFFFFF;
display: inline-block;
box-shadow: 0px 5px 8px 2px #464a4a;
border-top: solid 50px;
border-top-color: #494949;
}

}

[thatsmauri]

@media rules must be like this:

@media screen and (max-width: 400px)
{
     .box1 {
         //...
     }

     .box2 {
         //...
     }
}

Also see: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[Nancy OShea]

As Jon said, CSS media queries have their own set of left & right curly brackets like this:

@media {

     selector {rule}

     selector {rule}

}

[BigDingus]

Thanks for your help Jon and others.

Sooooo obvious when you know how.