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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -