Search code examples
csshtmlmedia-queries

I can't seem to get my media query to work for responsive site

Forgive me, as I'm new to CSS and web development all together. I have the viewport meta tag, and I have the media query in a separate css file. I've looked over my code, and there aren't any style changes in the HTML doc, and I don't see any in style.css that should override. I can't seem to find my error.

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">        
    <title>TITLE</title>
    <link rel="stylesheet" type="text/css" href="../css/responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>

//responsive.css 

@media (max-width: 768){  
    body{  
    display:none;  
    }  
}
Solution

  • You forgot the unit px:

    @media (max-width: 768)

    must be

    @media (max-width: 768px)