html - Why doesn't my @media screen save -


i have been stuck problem or past hour , annoying me. making website responsive different screen sizes every time write code it, test , works. if close browser , reopen or reopen code editor (brackets) page loads nothing happened. have re write again. problem keeps recurring , don't know why wont save. can place code since on 2000 lines , have moved on responsive side of site.

but have applied every html file.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

and have used starting statement @media in css

@media screen , (max-width:) 

css

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%;     left: 20%;     right: 40%; }  .socialmedia-facebook img {     position:fixed;     margin-left: auto;     margin-right: auto;     display: block;     bottom: 5%;     right: 20%;     left: 40%; }  @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%;     }  } 

there lots of reasons why have happen, think obvious one. if reach sertan width @media screen , (max-width: 640px) css wil enabled, in order work way need define width working in. while working on design, recommended turn of cache methods.

so work proberly prob need 3 @media screen properties.

examples


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 -