Media screen doesn't change with browser's resolution

css, html, media-queries, screen

Solution

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

Problem

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 :)

Original source