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>
Comments
Post a Comment