CODEWITHSUNDEEP
htmlcssmedia-queries
user1717344
user1717344

Reputation: 133

Only One Media Query Working. Can anyone advise on how the other one can work?

I have a simple web page with two CSS media queries. As I resize the browser, the first media query fires but I can't get the other one to work. The order seems to be appropriate, so does my syntax. Does anyone have any ideas?

    <!DOCTYPE html>
<html lang='en'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>McCann Echo Torre Lazur</title>
<style>

/**********************************************************************************
 * Structure
 **********************************************************************************/

body: {


}

#wrapper {
    width: 960px;
    min-height: 500px;
    border: 1px solid black;
    padding: 2px;


}

#logo {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

.bioinfo {
    border: 1px solid black;
    display: inline-block;
    width: 315px;
}

ul {
}

/**********************************************************************************
 * Media Queries
 **********************************************************************************/


 /* Screens with resolution less than 1024px width */
 @media screen and (max-width: 1024px) {
    .bioinfo {
        width: 49%;
        border-color:#ff0000;
    }
    #wrapper {
        width: 100%;
    }
 } //end media screen

/* Screens with resolution less than 480px width */
@media screen and (max-width: 700px) {
    .bioinfo {
        width: 95%;
        border-color:#ffffff;
    }
    #wrapper {
        width: 100%;
    }
} 



</style>


</head>
<body>
<div id='wrapper'>
<header>
    <div id='logo'>Logo Here</div>
</header>

    <div id='bios'>
        <div class='bioinfo'>Bio 1</div>
        <div class='bioinfo'>Bio 2</div>
        <div class='bioinfo'>Bio 3</div>
        <div class='bioinfo'>Bio 4</div>
        <div class='bioinfo'>Bio 5</div>
        <div class='bioinfo'>Bio 6</div>
    </div>



<div>
</body>
</html>

Upvotes: 1

Views: 127

Answers (1)

bookcasey
bookcasey

Reputation: 40483

//end media screen is not a valid comment. Remove it and this works.

CSS comments use the /* */ syntax.

Upvotes: 2

Related Questions