CODEWITHSUNDEEP
htmlcssmedia-queries
kduan
kduan

Reputation: 659

Media Queries not working, possible syntax issue

I'm trying out media queries for the first time but I cannot find where I went wrong. I have the code down below, and I'm assuming it's a syntax error. When I try to run it, nothing happens! Any help is appreciated, Thanks!

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1024px)" href="styles/mobile.css" />

styles/mobile.css

.color {
        height:100%;
    }

.anim {
        height:0%
    }

.scrollup {
        display:none;
    }

.scrolldown {
        display:none;
    }

 .menu-icon {
        display:none;
    }

Upvotes: 0

Views: 87

Answers (3)

Derek
Derek

Reputation: 228

There are actually 2 forms of a media query.

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css"/>

and

<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Also, I noticed you are using "Only" and "And" together in your media query. Here is some information on those 2 things:

"And" The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

@media (min-width: 700px) and (orientation: landscape) { ... }

"Only" The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Media queries are case insensitive. Media queries involving unknown media types are always false.

Upvotes: 0

Ketchuz
Ketchuz

Reputation: 45

As @unknowndomain says, the media query goes inside the CSS file, and also you should have the Viewport meta tag inside your document's head.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;">

If you don't put that tag the media queries are not going to work.

Upvotes: 0

unknowndomain
unknowndomain

Reputation: 985

Typically the media query goes around the CSS in the CSS file, not inline in the <link> tag...

@media only screen and (max-device-width: 1024px) {

    .color {
        height:100%;
    }

    .anim {
        height: 0%;
    }

    .scrollup {
        display: none;
    }

    .scrolldown {
        display: none;
    }

    .menu-icon {
        display: none;
    }

}

Upvotes: 1

Related Questions