Menu
Im trying to make a page to response to different browser resolution, i noticed i have to use media queries but it is not working for me. I coded the css as appearing normal with width pixel >900 and and will look like a phone web page when it is under it, but it won't react when im decreasing the resolution.
<!DOCTYPE html>
<html>
<head>
<title>testing 2</title>
<link type="text/css" rel="stylesheet" href="main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body">
<div id ="container">
<header class="mainHeader">
<content>
<p>Page Title, Name,....
</p>
</content>
</header>
<nav class="leftNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">body</a></li>
<li><a href="">education</a></li>
<li><a href="">project</a></li>
<li><a href="">education</a></li>
</ul>
</nav>
<div class="mainArticle">
<article>
<header>
<h2>This is the Main Title</h2>
</header>
<content>
<p>This is a standalone complete HTML5 and CSS3
</p>
</content>
</article>
</div>
<aside class="sideBar">
<article>
<h2>title for side</h2>
<p> side bar contetnta asd asdasda </p>
</article>
</aside>
<footer class="mainFooter">
<p>Copyright © </p>
</footer>
</div>
</body>
and this is my css
body{
/*color : blue;*/
font-size:85%;
font-family:Arial;
text-align : left;
background-color : #D0D0D0 ;
}
a{
text-decoration:none;
}
@media screen and (max-width:900px){
#container{
width :70%;
}
.leftNav{
width :100%;
margin : 3% 0;
}
.mainArticle{
width :100%;
margin : 3% 0;
}
.sideBar{
width :100%;
margin : 3% 0;
}
}
#container{
width:100%;
margin :0px auto;
}
.mainHeader {
background-color : #666;
height : 40px;
border-radius :5px;
margin : 2% 1%;
}
.mainHeader content p{
padding : 10px 25px;
color : #FFF;
}
.leftNav{
float:left;
width : 12%;
background-color : #FFF;
margin :0 0.5% 2% 2%;
height:200px;
}
.leftNav ul li{
margin : 5px;
display:block;
}
.mainArticle{
float:left;
width: 58%;
background-color : #FFF;
margin :0 0.5% 2% 0.5%;
height:200px;
}
.sideBar{
float:left;
width: 24%;
background-color : #FFF;
height:200px;
margin :0 2% 2% 0.5%;
}
.mainFooter{
background-color : #666;
height : 40px;
border-radius :5px;
margin : 5% 1%;
clear:both;
}
206
Stylesheets are evaluated in order from top to bottom. The #container block within your @media will be evaluated on a screen <= 900px, but it's being overridden by the other #container block later on in the stylesheet. This is why media queries are normally put at the end of a stylesheet.
105
If you write css on same id with different property
#container{
background: red;
}
#container{
background: black;
}
It will exucute second one
#container{
background: black;
}
https://jsfiddle.net/82rpsyhk/3/
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
