Ajay Ajay - 2 months ago 5
CSS Question

I am loosing stylings when I use media query in my CSS

Hi I am using media query in my application to make webpages responsive. I never used this before.
I am using media query in my CSS like below :

@media screen and (min-width: 70em) {
div.MoreInfoterms {

width: 800px;
margin-right: 250px;
margin-left: 55px;
margin-top: 20px;
border: 1px solid #cecece;
background-color: #f7f9f9;
max-height: 700px;
margin-bottom: 20px;
}
}


And this is my HTML :

<div class="MoreInfoterms">
<ul>
<li> <p> This App has no minimum term.</p> </li>
<li> <p>This App has no minimum term.</p> </li>
<li> <p>This App has no minimum term..</p> </li>

</ul>
</div>


http://jsfiddle.net/isherwood/LBuTj

Here in both cases when I minimize browser and when media query starts to take effect then I am able to see only contents without styles. So can someone help me in this?

Answer

With this line

@media screen and (min-width: 40em) 

You're setting the elements with styles if the browsers size is more than 40em. So to do the complement function you can set styles off the media query declaration or make a new one:

@media screen and (max-width: 40em) 

View this demo http://jsfiddle.net/LBuTj/2/