html - I dont know why but i cant use multiple @media screens -
this question has answer here:
i trying make site responsive , though problem media screen doesnt save found out. reason cant use more 1 media screens. have posted similer issue before know problem is, dont know solution. previous post : why doesn't @media screen save
css
@media screen , (max-width: 480px) { header img{ margin-left: auto; margin-right: auto; display: block; } footer img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; left: 40%; right: 40%; } .logo img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 2%; left: 38%; right: 40%; } .home img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; left: 35%; right: 40%; width: 120px; } .socialmedia-twitter img { position:fixed; margin-left: auto; margin-right: auto; display: blocks; bottom: 5%; left: 5%; right: 95%; } .socialmedia-facebook img { position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; right: 13%; left: 87%; } } @media screen , (max-width: 640px) { header img{ margin-left: auto; margin-right: auto; display: block; } footer img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; left: 40%; right: 40%; } .logo img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 2%; left: 40%; right: 40%; } .home img{ position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; left: 40%; right: 40%; width: 120px; } .socialmedia-twitter img { position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; right: 50%; } .socialmedia-facebook img { position:fixed; margin-left: auto; margin-right: auto; display: block; bottom: 5%; right: 20%; left: 50%; } }
when screen width 480 pixels or less, both rulesets apply. rules in max-width 640px ruleset override in 480px ruleset.
you'll have specify 640px ruleset applies between 480px , 640px width.
@media screen , (min-width: 480px) , (max-width: 640px) { ...
Comments
Post a Comment