CODEWITHSUNDEEP
cssvisual-studio-codemedia-queriescurly-braceserror-code
Studio Charlie
Studio Charlie

Reputation: 9

Media query error code: { expectedcss(css-lcurlyexpected)

I have run into an error code regarding my media query. It is coming up with 3 error codes for an expected curly bracket. Specifically on the '@media' and its closing '}' and the the closing '}' for 'html, body'. I have this css set up in another file and there isn't an error code. I'm not really sure how to move forward and fix this. (Please see screenshots attached to see the errors. I've had a look at adding the missing space after h1{ + a{ but that isn't coming up as an issue.)

Error code:

{ expectedcss(css-lcurlyexpected)

Media query:

@media only screen and (max-width: 768px) {
    html, body {
        --border-radius: 50px;
    }

    h1 {
        font-size: 200px;
    }
    
    h2 {
        font-size: 16px;
    }
    
    h3 {
        font-size: 14px;
    }
    
    p {
        font-size: 14px;
    }
    
    a {
        font-size: 14px;
    }
    
    section.vscroll {
        flex-direction: column;
    }
    
    section.vscroll figure {
        flex-basis: 25vh;
    }
    
    section.vscroll figure img {
        width: 20%;
    }
    
    footer {
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }
        
    footer .SCL-info .copyright {
        width: 100%;
    }
}

[Code error screenshots](https://i.sstatic.net/trbs91Zy.png)

Upvotes: 0

Views: 163

Answers (1)

EASLH
EASLH

Reputation: 9

Looks ok to me, this may be throwing it:

 --border-radius: 50px;

Doesn't render for me because I'm not calling a variable

var( --border-radius);

But that should not matter. Copy the code into another editor or run in another browser. Good luck!

Upvotes: 0

Related Questions