Recently, I've started using media queries in my application to ensure that the webpages are responsive. It's a new concept for me and I'm still learning how to properly implement it. Below is an example of how I am incorporating media queries into my CSS:
@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 the corresponding HTML code:
<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
I've encountered an issue where when the browser window is minimized and the media query comes into effect, only the contents are displayed without any styles. I would greatly appreciate any assistance in resolving this problem.