CODEWITHSUNDEEP
cssmedia
Chris English
Chris English

Reputation: 11

Using Media Queries

I'm trying to created a media query that displays an image if your screen resolution is between a certain size and I can't get it to work. I'm using the following:

<style>
@meida (min-width: 701px) and (max-width: 5000px) {
<div="sixteen columns" align="center">
<div class="home-boxes"><img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg">   
</div>
}
</style>

Upvotes: 0

Views: 71

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24703

You need to specify it as in my example below. HTML and CSS are seperate.

<style>
@media (max-width: 600px) {
  .home-boxes {
    display: none;
  }
}
</style>

HTML

<div class="home-boxes">
    <img src="http://www.ursovain.com/wp-content/uploads/boxes-3.jpg" />
</div>

In my example above the media query will apply the CSS within it when it's screen condition is met. In this case the CSS that will be applied is display: none to all elements with a class of home-boxes

Upvotes: 2

Related Questions