I see some write responsive like this,
#media screen and (min-width:991px) and (max-width:1200px){
/* styles */
}
#media screen and (min-width:767px) and (max-width:990px){
/* styles */
}
#media screen and (min-width:480px) and (max-width:766px){
/* styles */
}
the same thing I write like in this way
#media screen and (max-width:991px){
/* styles */
}
#media screen and (max-width:767px){
/* styles */
}
#media screen and (max-width:480px){
/* styles */
}
like whenever the design breaks I write that size in max-width: rule, and i get a fully responsive design. But which is the correct way doing the method
Take 500px as an example, in the first way, only the second property (border) will apply:
/* 500 is not between 767 and 990, so this rule will ignore */
#media screen and (min-width:767px) and (max-width:990px){
.elem {
background: red;
}
}
/* 500 is between 480 and 766, this rull will apply */
#media screen and (min-width:480px) and (max-width:766px){
.elem {
border: 10px solid green;
}
}
jsFiddle Demo.
But in the second way, both of these rules will apply:
/* 500 is smaller than 991, this rull will apply */
#media screen and (max-width:991px){
.elem {
background: red;
}
}
/* 500 is smaller than 767, this rull will apply */
#media screen and (max-width:767px){
.elem {
border: 10px solid green;
}
}
jsFiddle Demo.
Related
I've had no issues with any media queries until I tried creating one for large desktop monitors. For some reason only some of the styles in the large device media query work and some don't. It seems the general styles are overriding only some of the large media query, I just don't know why.
I assumed it was in the wrong order and was being overridden, but no matter where I put it (above general styles, below smallest query, above big query), nothing changes. I then saw a suggestion that it needed more specificity, so I tried doing that as well as !important. Still nothing changes. I've checked for misplaced ; and { } but it's all correct.
These are my media queries in order:
General styles not in media query
/* styles that work */
#media only screen and (min-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
UPDATE: Code sample
PS: Idk who's downvoting everything but it isn't me.
/* General styles that all work */
body {
font-size: 1.8rem;
}
h2{
font-size: 4rem;
}
h3{
font-size: 3rem;
}
.profilePic {
width: 30rem;
height: 30rem;
text-align: center;
border-radius: 50%;
border: var(--primary) 5px solid;
padding: 1%;
}
.typingEffect h1, .typingEffect p {
font-size: 4.5rem;
padding: 0.5rem;
font-weight: bold;
letter-spacing: 0.1rem;
text-align: center;
overflow: hidden;
}
/* Large device media query where some work */
#media only screen and (min-width: 2560px){
body{
font-size: 4rem; /* Works */
}
h2{
font-size: 9rem; /* Works */
}
h3{
font-size: 5rem; /* Works */
}
.profilePic {
width: 100rem; /* Doesn't work */
height: 100rem; /* Doesn't work */
}
.typingEffect h1, .typingEffect p {
font-size: 10.5rem; /* WORKS FOR h1, NOT FOR p */
padding: 5rem; /* WORKS FOR h1, NOT FOR p */
}
}
<header>
<img class="profilePic" src= "./images/orange-Avatar3.svg" alt="Avatar of me"/>
<div class="typingEffect">
<h1 class="name"> Hey, I'm Me</h1>
<p class="tagline"><span className="typed-text"></span><span class="cursor"> </span></p>
</div>
</header>
Ok buddy, I highly recommend going to the Mobile-first design. in order to avoid using max-width. Since order matters and you may end overruling some of the properties you wrote. Check this example out.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: red;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
As you can see every single query is working. But if you swap out the order problems will start to occur therefore you should always be careful when using max-width so you don't end up messing up your code.
Check out this snippet where I messed up the order.
div>header>h1 {
font-size: 40px;
color: orange;
}
#media only screen and (min-width: 2560px) {
div>header>h1 {
font-size: 150px;
color: blueviolet;
}
}
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
#media only screen and (max-width: 1275px) {
div>header>h1 {
font-size: 100px;
color: brown;
}
}
#media only screen and (max-width: 750px) {
div>header>h1 {
font-size: 75px;
color: yellowgreen;
}
}
<div class="container">
<header class="">
<h1 class=""> Using Animation! </h1>
</header>
</div>
In the above snippet, the following query didn't even work
#media only screen and (max-width: 600px) {
div>header>h1 {
font-size: 50px;
color: coral;
}
}
#media only screen and (max-width: 375px) {
div>header>h1 {
font-size: 125px;
color: tomato;
}
}
!! Since the code at the bottom is stronger in CSS you will find out the 750px breakpoint is working since it's at the bottom.
#media only screen and (max-width: 750px)
and it is overruling the breakpoints 600px and 375px since they appeared before the 750px breakpoint which is at the bottom of the CSS file.
#media only screen and (max-width: 600px)
#media only screen and (max-width: 375px)
**
I'm sure that your problem is just a CSS Specificity problem
**
That's why the best approach is to go mobile-first and use min-width since it is easier to care for and maintain. I hope my answer has given you a clear understanding of your problem and why your media were not working.
Use max-width instead of min-width for consistency
#media only screen and (max-width: 2560px){ /* styles that HALF work */ }
#media only screen and (max-width: 1275px){ /* styles that work */ }
#media only screen and (max-width: 750px) { /* styles that work */ }
#media only screen and (max-width: 600px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
use min-width instead max-width
when using max-width to this way css media query can't understand your query
When your page is 600px, it is compatible with almost all media queries
bestway:
/* styles that work */
#media only screen and (min-width: 1275px){ /* styles that HALF work */ }
#media only screen and (min-width: 751px){ /* styles that work */ }
#media only screen and (min-width: 601px) { /* styles that work */ }
#media only screen and (min-width: 376px) { /* styles that work */ }
#media only screen and (max-width: 375px) { /* styles that work */ }
I have the following media queries set up in my stylesheet, cna anybody tell me why the bottom query doesn't override the first query?
#media screen only and (max-width:992px) {
.some-element {float:left;}
}
#media screen only and (max-width:768px) {
.some-element {float:none;}
}
Try #media screen instead of #media screen only. The bottom query does override the top one.
#media screen and (max-width:992px) {
.some-element {
float:left;
background-color: #f00;
}
}
#media screen and (max-width:768px) {
.some-element {
/** See how the background-color property is overriden */
background-color: #000;
color: #fff;
}
}
<div class="some-element">Hi. I am floating.</div>
<h1>I am a block element</h1>
You wrote the media query in the wrong order, the only (or 'not') should come right after the '#media'.
Like this:
#media only screen and (max-width:992px) {
.some-element {float:left;}
}
#media only screen and (max-width:768px) {
.some-element {float:none;}
}
I'm currently playing with bootstraps v2.3.2. media querys (I'm not using bootstraps grid, just those 4 media queries) to test them on mobile and tablet devices, and I notice that I keep getting a horizontal scrollbar and I don't understand why?
Basically I have one div and this CSS:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin:0;
/* height: 3000px; */ /* forced vertical scrollbar */
height: 300px;
}
div{
padding: 0 10px;
margin: 0 auto;
background: aqua;
width: 980px;
border: 1px solid black;
height: 100%;
}
/* Large desktop */
#media (min-width: 1200px) {
div{
background: red;
width: 1200px;
}
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) {
div{
background: yellow;
width: 768px;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
div{
background: blue;
width: 100%;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
div{
background: green;
}
}
Situation when I force vertical scrollbar: JSBin
But when I don't force vertical scrollbar, I get the wanted result: JSBin
So it's obviously due the vertical scrollbar. I found this article about scrollbar issue in Responsive Web Design, but I get the same result in both Chrome and FF.
Update: as looking the source of bootstrap v3.3.2 I've noticed that they have new media queries, however, they don't use the minimal possible width for the .container. This are their media queries:
#media (min-width: 768px) {
.container {
width: 750px; /* 18px difference */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 22px difference */
}
}
#media (min-width: 1200px) {
.container {
width: 1170px; /* 30px difference */
}
}
And here's the JSBin. Even when I forced the vertical scrollbar to appear, this won't trigger the horizontal scrollbar.
But if I want to use the minimal possible width for the media queries, like:
#media (min-width: 768px) {
.container {
width: 768px;
}
}
#media (min-width: 992px) {
.container {
width: 992px;
}
}
#media (min-width: 1200px) {
.container {
width: 1200px;
}
}
This will trigger the horizontal scrollbar - JSBin
Did the guys from bootstrap did that on purpose, because of the possibly that there can be the presence of vertical scrollbar?
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
I know that this may be a novice question, but I would appreciate if someone clarify this for me.
Bootstrap Media Querys
Setting media query
Bootstrap supports four media sizes:
Phones < 768px (8 inch)
Tablets ≥ 768px
Desktops ≥ 992px (10.33 inch)
Desktops ≥ 1200px (12.5 inch)
These are not fixed sizes!
If you have a screen that has a min-width of 768px the media query should trigger.
However setting a container to 768px will almost allways make that screen overflow
First of all the body element of all modern browser does have a margin to it.
example: Webkit browsers: body {margin: 8px;} so if your element of 768px and a margin-top of 8 and margin-bottom of 8 you get: 784px
so your screen is 768px (or less) and your content is 784px this will make it overflow (as it should). That said bootstrap sets: body {margin:0;}
An other example would be border. Border adds size to your element unless box-sizing isn't default. While outline sets the border inside your element.
Did the guys from bootstrap did that on purpose, because of the possibily that there can be the presence of vertical scrollbar ?
There is a possibility of that but i would think they set it because there is a bunch of css property's that affect size, so they gave a margin of error so to speak to avoid strange behavior like a horizontal scroll bar popping up.
Question: Why can't I use the minimal possible width in the media query when the vertical scrollbar is present?
You can use it: Fiddle!
Just Remember that some browsers will render it with a certain width.
Checkout the fiddle
https://jsfiddle.net/YameenYasin/as4Lmgas/1/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
div {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background: blue;
height:auto;
min-height:300px; // For testing purpose only
}
#media (min-width: 768px) {
div {
width: 750px;
background: silver;
}
}
#media (min-width: 992px) {
div {
width: 970px;
background: yellow;
}
}
#media (min-width: 1200px) {
div {
width: 1170px;
background: red;
}
}
<div></div>
/* 1024 and above desktop ------ */
#media only screen
and (min-width: 1008px){
/* Styles */
.outerBox{
width: 796px;
}
#media only screen
and (min-width: 600px)
and (max-width: 640px){
/* Styles */
.outerBox{
width: 600px;
}
}
The queries above doesn't seem to work properly when applied together..as only the first one works when both applied and if I remove the first one the second one works fine..
Your first rule is missing the closing }:
/* 1024 and above desktop ------ */
#media only screen
and (min-width: 1008px){
/* Styles */
.outerBox{
width: 796px;
}
}
I'm using
#media only screen and (min-width:320px) and (max-width:480px) {
#hello { background:red;}
}
and
#media only screen and (min-width:481px) and (max-width:600px) {
#hello { background:green;}
}
I use http://mattkersley.com/responsive/ to test my site and when I check the 320x480 the media query is not working.
Any ideas?
Am also using this http://codebomber.com/jquery/resizer/ and get the same problem.
min-width:320px means the viewport must be at least 320px or wider, right?
It looks fine to me.
Here is is recreated on CodePen - http://codepen.io/justincavery/full/lbtBk
body {
background-color: #fff;}
/* Style the body where there is no media queries available */
#media (min-width:320px) and (max-width:480px){
body {background-color: red;}
/* Style the body if the viewport is at least 320px or at most 480px */
}
#media (min-width:481px) and (max-width:600px){
body {background-color: green;}
/* Style the body if the viewport is at least 481px or at most 600px */
}
#media (min-width:601px){
body {background-color: pink;}
/* Style the body if the viewport is at least 601px */
}