I am tring to make my page mobile responsive but it seems like media query does not work, why?
Question
So I want to make a quiz game and now I want to make it a little responsive. I made desktop first and now I am making it for pc. I try to use the media query but it seems like it does not work at all. What am I missing? I tried with a class instead of body but it stil does not work at all. I excluded the js because it was unnecesary
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); body { font-size: 12px; font-family: 'Work Sans', sans-serif; color: #333; font-weight: 300; text-align: center; background-color: #f8f6f0; } h1 { font-weight: 300; margin: 0px; padding: 10px; font-size: 20px; background-color: #444; color: #fff; }.question { font-size: 3em; margin-bottom: 10px; }.answers { margin-bottom: 20px; text-align: left; display: inline-block; font-size: 3em; }.answers label { display: block; margin-bottom: 10px; } input[type=radio] { height: 2em; width: 2em; } button { font-family: 'Work Sans', sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin: 20px 10px; z-index: 3; display: block; font-size: 2em; } button:hover { background-color: #38a; }.slide { position: static; left: 0px; top: 0px; width: 100%; z-index: 1; display: none; }.active-slide { display: block; z-index: 2; }.quiz-container { position: static; height: auto; margin-top: 40px; } @media (max-width: 600px) { body { font-size: 20px; } }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" href="QuizTransition.css"> </head> <body> <div class="container"> <div class="quiz-container"> <div id="quiz"></div> </div> <button id="previous">Intrebarea precedenta</button> <button id="next">Urmatoare intrebare</button> <div id="results"></div> </div> <script src="QuizLogic.js"></script> </body> </html>
3 answers
solution1
0 2020-04-27 16:03:45
I have tried with your code here in JS Fiddle .
It looks you made small mistake in @media query
@media only screen and (max-width: 768px) {
body {
background-color: red;
}
}
Hope this will be helpful. Please go through with W3 schools
solution2
0 2020-04-27 17:04:48
Your code is okey
Test with something clear visible. I've using background color, & it's working Use it for more readable-... ...
The width=device-width key-value pair sets the width of the viewport to the width of the device.
The initial-scale=1 key-value pair sets the initial zoom level when visiting the page.
- Always keep the small scope or range in down for media query screen size.
@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600); body { font-size: 12px; font-family: 'Work Sans', sans-serif; color: #333; font-weight: 300; text-align: center; background-color: #f8f6f0; } h1 { font-weight: 300; margin: 0px; padding: 10px; font-size: 20px; background-color: #444; color: #fff; }.question { font-size: 3em; margin-bottom: 10px; }.answers { margin-bottom: 20px; text-align: left; display: inline-block; font-size: 3em; }.answers label { display: block; margin-bottom: 10px; } input[type=radio] { height: 2em; width: 2em; } button { font-family: 'Work Sans', sans-serif; font-size: 22px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin: 20px 10px; z-index: 3; display: block; font-size: 2em; } button:hover { background-color: #38a; }.slide { position: static; left: 0px; top: 0px; width: 100%; z-index: 1; display: none; }.active-slide { display: block; z-index: 2; }.quiz-container { position: static; height: auto; margin-top: 40px; } @media (max-width: 1200px) { body { background: blue; } } @media (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: yellow; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="QuizTransition.css" type="text/css"> </head> <body> <div class="container"> <div class="quiz-container"> <div id="quiz"></div> </div> <button id="previous">Intrebarea precedenta</button> <button id="next">Urmatoare intrebare</button> <div id="results"></div> </div> <script src="QuizLogic.js"></script> </body> </html>
solution3
0 2020-04-27 17:27:03
When working with width-oriented media queries, It is best to start mobile-first. This means the first portion of your CSS should be styles that are standard for your website and need no media queries at all to work at mobile-width.
Then you would add a media-query starting at a given width using min-width, thus:
@media (min-width: 720px) {
body { background: red;}
}
Your media queries have a hole where no declaration covers, but if you need a middle area the syntax looks like this:
@media screen and (min-width: 768px) and (max-width: 880px) {
body { background: pink;}
}
I hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.