html - Width: x% changing depending on content size -

i need change % width on category images within site whenever screen gets smaller. or images super small on smaller resolution.

what want achieve this: http://www.twitch.tv/directory

i've tried using code. (but isnt working)

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

would super greatful help!

/ martin

as rekire says, messed syntax, , need set full rules.

also, there shouldn't semicolons after rules. , lastly, 2 final rules cover posibilities, width being greater or smaller 480px, first rule never apply.

i have changed have style lower res, higher res, , default applied in between

.category-list-item {    background-color:red;  }  @media screen , (min-width: 769px) {    .category-list-item { background-color: green; }  }  @media screen , (max-width: 480px)  {    .category-list-item { background-color: blue; }  }

<div class="category-list-item">test</div>