CODEWITHSUNDEEP
htmlcss
px-41
px-41

Reputation: 25

@media only screen not working

I have placed 

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

in my header. I want a specific css for screen width 768px but my div with class price-tag is not taking style from

@media only screen (min-width:768px)  {.price-tag{left:180px;}}

If I write

@media (min-width:768px)  {.price-tag{left:180px;}}

it takes the style and applies it to all screen width. Am i doing this in wrong way ?

Upvotes: 1

Views: 390

Answers (1)

Nathan Dawson
Nathan Dawson

Reputation: 19308

You need to use and.

This isn't valid:

@media only screen (min-width:768px)

It should be:

@media only screen and (min-width:768px)

Applying to 768px specifically:

If I've understood your comment correctly you'd like to apply styling to screens specifically at 768px wide. No lower; no higher. While I can't quite picture why such code would be useful or practical I can show you how to do it.

Combine min-width and max-width using the same value:

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

Upvotes: 2

Related Questions