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
- 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%; } }
- 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.
Comments
Post a Comment