Skip to main content
B
BigDingus
Inspiring
June 21, 2021
Answered

Expected LBRACE

  • June 21, 2021
  • 3 replies
  • 1978 views

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;
}

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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)...

    quote

     

    @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;
    }

    }



    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 21, 2021

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

     

    @media {

         selector {rule}

         selector {rule}

    }

     

    Nancy O'Shea— Product User & Community Expert
    B
    BigDingusAuthor
    Inspiring
    June 21, 2021

    Thanks for your help Jon and others.

    Sooooo obvious when you know how.

    thatsmauri
    Community Expert
    thatsmauriCommunity Expert
    Community Expert
    June 21, 2021

    @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

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    June 21, 2021

    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)...

    quote

     

    @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;
    }

    }



      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices