Media screen does not change with browser resolution

Question

This is the first time I've been working with Media screens, and they don't seem to work the way they are supposed to be too ....

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

all css styles are inside here, and it displays as it is, as intended.

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

all the CSS styles that I post here are not relevant to the page when the width goes beyond 321 px. which should not happen .... for example, if I changed any color of the text, nothing would have changed.

in advance for help :)

Answer 1

The CSS that you write in this multimedia query will be applied to a screen with a width of less than 321px;

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

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

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

You need to write Media Query for the class or element as -

 @media screen and (max-width: 700px){ body{ font-size:20px; color:red; } } 

Demo here