I have the following three queries. My purpose is when screen width is 1200 or higher; screen between 800 and 1199 and any screen width below 800. the following code does not fire on any width below 800.
I have no additional CSS to overwride any style. the 400px width still takes the styles of between 800 and 1199 pixels block.
What am I doing wrong?
#media screen and (min-width: 1200px) {
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
}
#media screen and (max-width: 799px) {
}
`<!DOCTYPE html>
<html>
<head>
<style>
#media screen and (min-width: 1200px) {
body {
background-color: red;
}
}
#media screen and (min-width: 800px) and (max-width: 1199px) {
body {
background-color: green;
}
}
#media screen and (max-width: 799px) {
body {
background-color: blue;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>`
You either go (desktop-first) approach OR (mobile-first) approach. Don't mix both of them.
Desktop First:
div {background:yellow; height:200px; width:200px; border:2px solid #000;}
#media screen and (max-width: 1200px) {
div {background:green;}
}
#media screen and (max-width: 800px) {
div {background:blue;}
}
#media screen and (max-width: 480px) {
div {background:pink;}
}
<div></div>
Mobile-First:
div {background:pink; height:200px; width:200px; border:2px solid #000;}
#media screen and (min-width: 480px) {
div {background:blue;}
}
#media screen and (min-width: 800px) {
div {background:green;}
}
#media screen and (min-width: 1200px) {
div {background:yellow;}
}
<div></div>
Start describing CSS from one end (Either biggest-screen size) OR (Smallest screen-size) and go to the other end. Never try add min-width and max-width in same CSS defination. Its confusing and inappropriate.
Also, use something like #media screen and (min-width:520px) and (max-width:560px) when after all CSS you've written, only for certain width-zone, you specifically want to change something or add a unique CSS. Otherwise don't use the mix of (min-width) and (max-width) in same CSS code ever. That's not a good practise.
Go with flow in uni-direction, either from Wide-screens then keep using (max-widths) OR starting from 0px or smallest-mobiles and then keep using (min-width) to keep defining new CSS till you reach other end.
Related
This is with #media screen and (max-width:700px) {
https://i.gyazo.com/eab7c69146b5d47f3ce9adefae6e712d.png
When I do #media screen and (min-width:700px) { It gets screwed up. How do I change it to min-width without it messing up?
https://gyazo.com/3c27f20efe29a4cf001bf531dac59405.png
Use this code
#media only screen and (min-width: 700px) {
}
this will surly help you
You can use both min-widht and max-width and also combine them if you want.
min-width example:
#media screen and (min-width: 576px) {
body {
background-color: lightgreen;
}
}
max-width example:
#media screen and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
min-width and max-width combination example:
#media (min-width: 576px) and (max-width: 767.98px) {
body {
background-color: lightgreen;
}
}
Note that I used 767.98px for the max-width because the next media rule would be for example #media (min-width: 768px) and (max-width: 991.98px) {}.
Read more about media rules here. You can also view how media rules are used in bootstrap here.
I stuck to hide div between two screen size. like I want to hide div between screen sizes 550px - 910px with the following media query.
#media only screen and (min-width: 550px) - (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
use the following syntax to do it:
#media (min-width: 550px) and (max-width: 900px)
{
.bsp_big-image{
display: none !important;
}
}
I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code
the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query
To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design
I have the following CSS to align page content within different brower sizes. However or some reason it does not like the first #media statement, in other words changing anything in there does not do anything to the layout. I use http://quirktools.com/screenfly/ to verify the layout.
Changing the sequence of the statements will mess things up as well. I am lost
Your help is greatly appreciated
Thanks
#media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
#media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
#media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
#media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE
}
First you want to define a screen size for anything larger than, from there you make your media queries for the sizes in between.
Here is an example.
/* Large desktop */
#media only screen and (min-width :75.000em) {
.test {
display: none;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :61.250em) and (max-width:74.938em) {
.test {
display: block;
color: #FF0;
}
}
/* Portrait tablet to landscape and desktop */
#media only screen and (min-width :48.000em) and (max-width:61.188em) {
.test {
display: none;
}
}
/* Landscape phone to portrait tablet */
#media only screen and (min-width :30.063em) and ( max-width :47.938em) {
.test {
display: none;
}
}
/* portrait phones and down */
#media only screen and (max-width :30.000em) {
.test {
display: block;
color: #FF0;
}
}
<meta name="viewport" content="width=device-width initial-scale=1" />
Include above code into html to run media query.
You need to set your first one to say "anything smaller than (max-width: 829px), do this"
For EG:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px) and (max-width: 1025px) {
.bg {background-color:red;}
}
#media (min-width: 1026px) and (max-width: 1580px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) and (max-width: 2000px) {
.bg {background-color:yellow;}
}
See it in effect at this Plunker - I added the bg class to the body so you can see the background change color when you change the frame width.
You can simplify your queries too by saying:
#media (max-width: 829px) {
.bg {background-color:blue;}
}
#media (min-width: 830px){
.bg {background-color:red;}
}
#media (min-width: 1026px) {
.bg {background-color:green;}
}
#media (min-width: 1590px) {
.bg {background-color:yellow;}
}
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually matters. I didn't test it in every single browser, but just on Chrome. Is there an explanation for this behaviour? Sometimes it gets frustrating when your site doesn't work as it should and you are unsure if it's the query or the order in which the query is written.
Here's an example:
HTML
<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two">Contact us</div>
</body>
CSS:
body{
font-size:1em; /* 16px */
}
.two{margin-top:2em;}
/* Media Queries */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
However, If I wrote the query for 1024x600 in the last, the browser would ignore it and apply the margin value specified in the starting of the CSS (margin-top:2em).
/* Media Queries - Re-arranged version */
#media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
#media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
#media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
#media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
#media (max-height: 600px) {
.two{margin-top:4em;}
}
If my understanding of media queries are correct, the order shouldn't matter, but it seems it does. What could be the reason?
That's by design of CSS — Cascading Style Sheet.
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).
So, given this CSS
#media (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
if the browser window is 350 pixels wide, the background will be blue, while with this CSS
#media (max-width: 400px) {
body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.
Finally, with
#media (max-width: 400px) {
body {
background: blue !important;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
or
#media (max-width: 400px) {
html > body {
background: blue;
}
}
#media (max-width: 600px) {
body {
background: red;
}
}
the background will be blue (with a 350 pixels wide window).
Or you could just add min-width to the bigger media query/ies and not have any issues, regardless of the order.
#media (min-width: 400.1px) and (max-width: 600px) {
body {
background: red;
}
}
#media (max-width: 400px) {
body {
background: blue;
}
}
Using this code, in any order, the background-color will always be red for resolutions with a width of 400.1px-600px, and will always be blue for resolutions with a width of 400px or less.