CSS view by media screen width
Question
I have my CSS file, which looks like this:
.topBarBox{
background-color:black;
}
@media screen and (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
The background color of the div is black no matter what the screen size is. Am I doing something wrong here?
4 answers
solution1
1 2015-12-15 13:03:08
Change your media query
@media only screen and (max-width : 900px) {
.topBarBox{
background-color:blue;
}
}
solution2
1 2015-12-15 13:04:04
You forgot the "only" keyword. Change it to this:
@media only screen and (max-width: 900px) {
.topBarBox {
background-color:blue;
}
}
solution3
1 2015-12-15 13:18:11
Make sure, your HTML page has following line in your <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
And also, <!DOCTYPE html> above your <html> section.
This should work with:
.topBarBox{
background-color:black;
}
@media (max-width: 900px) {
.topBarBox{
background-color:blue;
}
}
Also, please make sure that either of html or body does not have any fixed width like:
body, html {
width: 1000px;
}
If there is such any CSS style, then remove it or change it like:
body, html {
width: 100%;
}
solution4
1 2015-12-15 13:33:31
This worked fine for me:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.topBarBox {
background-color: black;
}
@media screen and (max-width: 900px) {
.topBarBox {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="topBarBox">
Hello
</div>
</body>
</html>
Maybe you have some styles elsewhere in your CSS that override these styles?
You could try to use the web-inspector , that should make things clear.
Example:
.topBarBox { background-color: black; } @media screen and (max-width: 900px) { .topBarBox { background-color: blue; } }
<div class="topBarBox"> Hello </div>
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.