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.
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">
I'm trying to move from Bootstrap to Foundation, but I'm having an issue in trying to identify how to exactly change the breakpoint for the topbar in Foundation. I'm using a a CDN version of the minified CSS for Foundation, so I do NOT have access to the settings SASS file to modify this. Is there a quick CSS override workaround? So far my searches on here, and Google, haven't turned up a working solution.
Import another CSS file below the minified Foundation CSS that will target the topbar
<link rel="stylesheet" href="foundation-min.css">
<link rel="stylesheet" href="override.css">
So, for example, if .topbar has margin: 1px; override it on override.css by setting another margin: 2px; attribute there.
This post will help
https://stackoverflow.com/a/31511646/6294600
Have you checked this one https://zurb.com/university/lessons/change-foundation-s-default-breakpoints
EDIT: a hint here...
look for the .show-for-medium class... I hope you know what to do after that... Don't give up...
#media screen and (max-width: 39.9375em) {
.hide-for-small-only {
display: none !important; } }
#media screen and (max-width: 0em), screen and (min-width: 40em) {
.show-for-small-only {
display: none !important; } }
#media screen and (min-width: 40em) {
.hide-for-medium {
display: none !important; } }
#media screen and (max-width: 39.9375em) {
.show-for-medium {
display: none !important; } }
#media screen and (min-width: 40em) and (max-width: 63.9375em) {
.hide-for-medium-only {
display: none !important; } }
#media screen and (max-width: 39.9375em), screen and (min-width: 64em) {
.show-for-medium-only {
display: none !important; } }
#media screen and (min-width: 64em) {
.hide-for-large {
display: none !important; } }
#media screen and (max-width: 63.9375em) {
.show-for-large {
display: none !important; } }
#media screen and (min-width: 64em) and (max-width: 74.9375em) {
.hide-for-large-only {
display: none !important; } }
#media screen and (max-width: 63.9375em), screen and (min-width: 75em) {
.show-for-large-only {
display: none !important; } }
These parts can be found in
https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css
Change the values, I hope this answers the question. Happy Coding...
LAST BIT OF INFO:
change the min-width size
#media screen and (min-width: 64em) {
.top-bar{
display:none;
}
}
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;
}
}
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>