CODEWITHSUNDEEP
htmlcssscreenmedia-queries
user1775570
user1775570

Reputation: 413

Media screen doesn't change with browser's resolution

I'm working with Media screens for the first time and They don't quite seem to be working the way they're supposed too....

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

all the css stylings within here and it shows up as this as it's supposed to.

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

all css stylings that i place in here don't apply to the page when the width goes beyond 321 px. which isn't supposed to happen.... for example if i were to change any text color nothing would end up changing.

thanks in advance for any help :)

Upvotes: 4

Views: 224

Answers (1)

Dipak
Dipak

Reputation: 12190

The CSS you write in this media query will be applied to the screen which has width less than 321px;

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

if you want to apply the same CSS when you resize it beyond 321px then you need to increase the width as per your requirements - 

@media screen and (max-width: 700px){

You need to write Media Query to a class or element as - 

@media screen and (max-width: 700px){

body{
  font-size:20px;
  color:red;
}

}

Demo Here

Upvotes: 4

Related Questions