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