html - The screen size overwrites the other ones :S -

ive been trying make change of category images depending on screen size. right first screen width size being used. seems though other ones being overridden first row of code (max-width: 769px). (on site: http://origami.directory/)

what can changes 3 times should do?

    .category-list-item {   float: left;   padding: 1em; } @media screen , (max-width: 769px) {   .category-list-item { width: 20%; } }; @media screen , (min-width: 480px) {   .category-list-item { width: 25%; } }; @media screen , (max-width: 480px)  {   .category-list-item { width: 33.33%; } }; 

if me fix super grateful! / martin

1. remove semi-colon ; end of queries.

your queries should this:

@media screen , (max-width: 769px) {   .category-list-item { width: 20%; } } @media screen , (min-width: 480px) {   .category-list-item { width: 25%; } } @media screen , (max-width: 480px)  {   .category-list-item { width: 33.33%; } } 

2. your queries conflicting each other making second query obsolete. specify range each this:

    @media (max-width: 480px) {        .category-list-item{width: 33.33%;}      }        @media (min-width: 481px) , (max-width: 768px) {          .category-list-item { width: 25%; }      }      @media (min-width: 769px) {          .category-list-item { width: 20%; }      }

i'm not sure min-width:769px part let me know trying , i'll fix accordingly. above show how queries work basically.