I have some simple CSS and HTML just to see if the media query work. But something wrong
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.box {
background: red;
width: 100px;
height: 200px
}
/* Mobile Phones */
#media screen and (max-device-width:640px) {
.box {
background: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
The box background won't change to blue when viewing in mobile. I use firefox plugin "Go Mobile" to simulate mobile screen environment during the test
Solution: https://jsfiddle.net/r56m37kb/
max-width instead of max-device-width
You are using the incorrect syntax for your media query. Here is a working snippet with comments on where to make the change (max-width vs max-device-width):
.box {
background: red;
width: 100px;
height: 200px
}
/* Mobile Phones */
#media screen and (max-width:640px) /* Changed from max-device-width */ {
.box {
background: blue;
}
}
<div class="box"></div>
Related
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed 2 years ago.
I;m trying media query in scss but is not working. I have code like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 459px) {
body {
background: black;
}
}
</style>
now no media query is working for width 459px and background is red... (black is on max 458 and yellow on 460)
but when I changed to
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 460px) {
body {
background: black;
}
}
</style>
then black background is working for 459px but on 460px two media queries are working...
how to fix that on max-width I will have only black background and on min-width only yellow?
I would do it differently: Define a general rule first and then one media query for smaller screens, like this:
body {
background: yellow;
}
#media (max-width: 460px) {
body {
background: black;
}
}
Or the other way round, using a mobile-first approach:
body {
background: black;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
Both ways there is certainly no width where two seetings would collide, and no width where no setting would apply at all.
Here is a simple HTML page that uses multiple #media rules:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<style type="text/css">
.div1{
height: 100vh;
width: 100vw;
display: block;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
#media only screen and (max-width: 700px) and (min-width: 500px) {
.div1{
background-color: green;
}
}
#media only screen and (max-width: 499px) and (min-width: 300px) {
.div1{
background-color: red;
}
}
#media only screen and (max-width: 299px) {
.div1{
background-color: yellow;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
This page should change its colour as the window becomes smaller. It works as intended if I manually resize the web browser window. It also works under Firefox. However, it fails to work properly under Chrome's responsive design mode [Version 69.0.3497.100 (Official Build) (64-bit)]
Strangely enough, the CSS behaves as expected under Chrome's responsive design mode when I recreated it in JSFiddle here: http://jsfiddle.net/7g5jca8x/13/
What is the difference between the JSFiddle version and the HTML version? I can't figure this out.
You were missing the viewport meta tag here is an example
<meta name="viewport" content="width=device-width, initial-scale=1">
On certain breakpoints in the browser I am getting some unexpected results while using Bootstrap (V3.3.7). So I set up a little experiment with the BS hidden classes.
The BS CSS file contains the following CSS for the hidden classes:
#media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
I have set up the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Bootstrap hidden classes</title>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<style>
.hidden-xs{ color: red; }
.hidden-sm{ color: blue; }
.hidden-md{ color: pink; }
.hidden-lg{ color: green; }
</style>
</head>
<body>
<div class="hidden-xs">Hidden xs</div>
<div class="hidden-sm">Hidden sm</div>
<div class="hidden-md">Hidden md</div>
<div class="hidden-lg">Hidden lg</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
With the CSS I expect at all time there will be 3 elements visible in my set up. However on window widths 767, 991 and 1199 there are 4 elements present. I tested this in Chrome and Firefox.
I was under the assumption the way media queries in BS are used, is the correct way. Why am I getting this result? Am I missing something or is BS using media queries wrong?
I'm having a similar issue in my project, so I edited the bootstrap code like this, and it seemed to fix the issue.
#media (max-width: 767.99px) {
.hidden-xs {
display: none !important;
}
}
#media (min-width: 768px) and (max-width: 991.99px) {
.hidden-sm {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199.99px) {
.hidden-md {
display: none !important;
}
}
#media (min-width: 1200px) {
.hidden-lg {
display: none !important;
}
}
I think the underlying issue here is that the browsers are measuring out width in fractions of pixels, but the css leaves a 1 pixel gap between the classes.
I have the following (simplified) example code:
( jsbin: http://jsbin.com/cisahilido/1/edit?html,css,output )
SCSS:
.container {
background: none;
}
#media screen and (max-width: 480px) {
.container {
background: red;
}
}
#media screen and (max-width: 768px) {
.container {
background: white;
}
}
#media screen and (max-width: 1024px) {
.container {
background: blue;
}
}
markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
hello!
</div>
</body>
</html>
Now, when the screen is 480px or less, I would expect the .container to have a red background. However, it seems to ALWAYS have the blue background, up until the 1024px breakpoint, then it is has no background.
Why do max-width styles override smaller breakpoints with bigger ones?
Because 480 is less than the last max-width of 1024. CSS always uses the last valid value, so you need to order max-width media queries from largest to smallest to get the intended value.
jsbin
.container {
background: none;
}
#media screen and (max-width: 1024px) {
.container {
background: blue;
}
}
#media screen and (max-width: 768px) {
.container {
background: white;
}
}
#media screen and (max-width: 480px) {
.container {
background: red;
}
}
My webpage uses multiple sections. I have the .header section set to 1050px which is perfect for desktop viewing, but when viewed on a mobile device the elements inside overflow into the next section.
How can I seamlessly change the section height for mobile viewing so the elements don' overflow?
Other ideas are welcome as well.
Here is my CSS for the section:
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
height: 1200px;
}
Here's one option for you: http://codepen.io/panchroma/pen/BulnL
I'm using media queries to set different CSS values as the viewport of window width changes. The css is easy to follow and for this to work reliably, you need to include a meta tag similar to the following in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've used min-height instead of heght to control the div sizes, because it's more flexible, for example it will probably give better results if a user has a large font setting.
The break points I've chosen for the media queries viewport widths are for illustration only, customise these to fit the specifics of your design.
Good luck!
CSS
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
min-height: 900px; /* set default height */
transition: all 0.5s ease; /* optional css transition effect */
}
/* For media queries to work on smartphones, be sure to add a meta tag similar to the following
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/
#media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}
#media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}
#media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}
#media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}