Raheel Asad Raheel Asad - 11 days ago 7
HTML Question

Simply wants to style media query

Here is my html code! for simple layout:

<!DOCTYPE html>
<html>
<title> responsive idea web </title>
<head>

<!-- CSS FILES -->
<link rel="stylesheet" href="css/style.css"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script src="js/jquery-3.1.1.min.js"> </script>
<script>
//toggle function that will display pixels on diff screens
// this script is not working but it has nothing to do with responsiveness .
var showWidth =1;
if(showWidth==1){
$(document).ready(function(){
$(window).resize(function(){
var width =$(window).width();
document.getElementById('output_width').innerHtml="window Width:"+width.toString();
});
});
}

</script>

</head>
<body>
<!-- id used to access document.getelement by id-->
<div id="output_width"> </div>
<!-- using html 5 elements -->
<div id="container">
<div class="main-header">
<img id="logo" src="images/1.jpg" alt="vector"> </img>
<!-- using another div inside of it navigation bar and logo-->
<nav class="main-nav">
<!-- remember you have to have floating elements
inside of non floating object like main-nav -->
<ul>
<li><a class ="active "href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Contact </a></li>
<li><a href="#"> Services </a></li>
<li><a href="#"> Colaborate </a></li>
</ul>
</nav>
</div>
</div>

<div id="main">
<div id="content">
<article class="art1">
<header class="art-header">
<h2 class="title"> <a href="#"> First Post </a></h2>
<span> Its a good paragraph </span>

</header>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community. </p>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>

<a href="#" class="Read-more"> Read More</a>


</article>
<article class="art2">
<header class="art-header">
<h2 class="title"> <a href="#"> First Post </a></h2>
<span> Its a good paragraph </span>
</header>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>
<p>8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.8269 Best Font Free Vector Art Downloads from the Vecteezy community.</p>

<a href="#" class="Read-more"> Read More</a>

</article>

</div>
**<aside id="side-bar">
<div class="block">
<h2> Top Sidebar </h2>
<p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>
</div>
<div class="block">
<h2> Mid Sidebar </h2>
<p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>
</div>
<div class="block">
<h2> Bottom Sidebar </h2>
<p>ector Font. 1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh.</p>
</div>
</aside>**

<div class="clr">
Clear both floats
</div>

<footer>
<p> copy rigt @ every one inside of it </p>
</footer>
</div>

</body>
</html>
**Here is my css code !..**

body {/*
background-image: url("../images/2.png");
background-repeat: repeat;*/
font-size:87.5%; /* percent means fluid to make font good.*/
font-family:arial,sen-serif;
color:#666666;
line-height:1.7em;
text-align:left; /* all elements are now align left */
}

#container{
width:80%; /* again using 80% just to make fluid other wise it could
be 960 px; --*/
margin:0 auto;
overflow:auto;
clear:both;
}

/* now for logo */
#logo{
width:20%;
margin:10px 0px;
}
.main-nav{
background-color:#882433;
border-radius:5px;
border:px solid #c13046;
color:white;
}
.main-nav ul{
list-style:none;
margin:0px;
padding:7px 0px 0px 0px;
display:inline-block;
background-color:;
}
.main-nav li{
color:#ffffff;
float:left;
margin-left:3px;
}
.main-nav li a{
color:#ffffff;
/* this is used to escape from scroll bar*/
padding:10px 20px;
height:20px;
display:inline-block;
}
.main-nav li a:hover{
background-color:#efeadd;
color:#666666;
border-radius:5px;
}
.main-nav li a.active{
background-color:#efeadd;
color:#666666;
border-radius:5px;
}
#content{
width:70%;
float:left;
overflow:auto;
}
/* articles starts---*/

article{
border-radius:5px;
background-color:#F9F9F9;
overflow:auto;
padding:10px 20px;
margin-top:10px;
}
article span{
font-style:italic;
color:cyan;
}
a.Read-more{
display:block;
float:right;
color:#ffffff;
padding:5px 9px;
background-color:#c13046;
border-radius:5px;
}
a.Read-more:hover{
background:cyan;
color:#ffffff;
}
.block{
border-radius:5px;
background:#F9F9F9;
overflow:auto;
padding:10px 15px;
margin:10px 0 0 10px;
}
footer{
background:#882433;
height:40px;
border:1px solid #c13046;
margin-top:10px;
border-radius:5px;
}
footer p{
color:#ffffff;
margin:0;
padding:10px 0 0 0;
text-align:center;
}
**/*Tablets and ipad portrait/Landscape*/
@media only screen and (min-width:768px) and (max-width:960px){
#container{
width:95%;
}
#logo{
margin:0px auto;
display:block;
width:65%;
}
#content{
width:100%;
float:none;
}
***#side-bar{
float:none;
width:100%;
background-color:black;
}***
}**
/*--ends of media query---*/
#side-bar{
width:30%;
float:left;
}

a{
text-decoration:none;
color:#781a26;
}
a:hover{
color:#666666;
}
h2{
color:#781a26;
}
.clr{
clear:both;
background-color:#781a26;
color:#ffffff;
text-align:center;
}


I am trying to achieve that whenever I scale down browser up to 760px than id
#side-bar
in media query its width set to 100%.
{ width:100%;}
but this is not
what I am expecting to get out instead of it I got nothing is working except the background. I have tried everything and rechecked. I do not know what exactly is causing that problem. As you can see in this iamge:


Answer

Reset your media query

@media only screen and (min-width: 768px) and (max-widt: 960px) {}

means that the changes would start when screen size is at 960px and stop at 768px. Make your query

@media only screen and (min-width: 160px) and (max-width: 760px) {
#side-bar {
    width: 100%;
    }
}

This should work since you want side bar to be 100% at 760px.