im trying to make my website responsive using media queries, however the page is not responding when i used the descendant selector in certain parts of me code.
The page is responsive when i use this code:
.div1{
float: left;
width:20%;
height: 200px;
background-color:red;
border: 1px solid #f2f2f2;
margin-left: 2%;
border-radius: 50%;
}
.div2{
float: left;
width:20%;
height: 200px;
background-color:yellow;
border: 1px solid #f2f2f2;
margin-left: 2%;
border-radius: 50%;
}
.div3{
float: left;
width:20%;
border-radius: 50%;
height: 200px;
background-color:blue;
border: 1px solid #f2f2f2;
margin-left: 2%;
}
/* media queries*/
@media screen and (max-width:800px) {
.sec1 div{
width:40% ;
}
}
whenever i use this code, the page is longer responsive:
.sec1 .div1{
float: left;
width:20%;
height: 200px;
background-color:red;
border: 1px solid #f2f2f2;
margin-left: 2%;
border-radius: 50%;
}
.sec1 .div2{
float: left;
width:20%;
height: 200px;
background-color:yellow;
border: 1px solid #f2f2f2;
margin-left: 2%;
border-radius: 50%;
}
.sec1 .div3{
float: left;
width:20%;
border-radius: 50%;
height: 200px;
background-color:blue;
border: 1px solid #f2f2f2;
margin-left: 2%;
}
/* media queries*/
@media screen and (max-width:800px) {
.sec1 div{
width:40% ;
}
}
My HTML:
<body>
<div class="sec1">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</div>
<body/>
Notice the difference bewteen the codes is the addition of the class sec1 before the div classes (before the media query). My question is, why doesn't the latter code work?
