Does anyone know why media queries not working in Safari? For example:
body {
background-color:black;
}
#media screen and (min-width: 1024px) and (max-width: 1300px) {
body {
background-color:red;
}
}
#media screen and (max-width:860px) {
body {
background-color:yellow;
}
}
#media screen and (max-width: 600px) {
body {
background-color:orange;
}
}
This example(http://jsfiddle.net/crUVv/show) works great in all browsers except in Safari.
use this meta in your head
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
Related
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 want to make one part of the page responsive. But I cant get it working.
Only the media query with 1920px works.
this is my code:
#media screen and (max-width: 1440px) and (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media screen and (max-width: 1920px) and (min-width: 1700px) {
#designer-info{
margin-right:-8%;
}
}
#media screen and (max-width: 2880px) and (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
Could somebody help me. i cant find the solution.
Not working because you have in one query min-width:1920px and in another query max-width:1920px, so it will override.
don't need to use both max-width and min-width
either use mobile first approach using min-width
#media (min-width: 1350px) {
#designer-info {
margin-right: -129px;
}
}
#media (min-width: 1700px) {
#designer-info {
margin-right: -8%;
}
}
#media (min-width: 1920px) {
#designer-info {
margin-right: -430px;
}
}
or non-mobile approach using max-width
#media (max-width: 2880px) {
#designer-info {
margin-right: -430px;
}
#media (max-width: 1920px) {
#designer-info {
margin-right: -8%;
}
}
#media (max-width: 1440px) {
#designer-info {
margin-right: -129px;
}
}
}
Need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML head section.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
<body>
...
</body>
</html>
maybe override there (max-width: 1920px) and (min-width: 1920px)
You should to use the different width in each media query.
Hope this can help you
Ex.
(max-width: 1920px) and (min-width: 1700px)
and
(max-width: 1921px) and (min-width: 2880px)
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;
}
}
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>