I am trying to make a responsive website, and am using #media only screen and (max-width:...) & #media only screen and (min-width:...) to try and size everything.
When using multiple #media on one div, it does not seem to work.
The fiddle here will explain what I am trying to do.
HTML
<div class="mainNavi2">
<p> test </p>
</div>
CSS
#media only screen and (max-width: 800px) {
.mainNavi2{
border:1px solid orange;
}
}
#media only screen and (min-width: 851) {
.mainNavi2{
border:1px solid green;
}
}
#media only screen and (max-width: 850) {
.mainNavi2{
border:1px solid blue;
}
}
What I am basically trying to do is:
when the screen is at 800px (or less), an orange border will be displayed
for width of 850px (or less) a blue border will be displayed
for a width of 851 (or more) a green border will be displayed.
They all work separately, but when all put together, only the max-width:800px works.
Because of the order of your media queries, the orange is being overridden by the blue. Rearrange them and it works:
#media only screen and (max-width: 850px) {
.mainNavi2 {
border:1px solid blue;
}
}
#media only screen and (max-width: 800px) {
.mainNavi2 {
border:1px solid orange;
}
}
#media only screen and (min-width: 851px) {
.mainNavi2 {
border:1px solid green;
}
}
Demo
A better approach might be to follow Bootstrap's lead and go mobile-first, using only ascending min-width statements:
.mainNavi2 {
border:1px solid orange;
}
#media only screen and (min-width: 801px) {
.mainNavi2 {
border:1px solid blue;
}
}
#media only screen and (min-width: 851px) {
.mainNavi2 {
border:1px solid green;
}
}
Demo 2
This will work: http://jsfiddle.net/q9ae3r7p/3/
You had forgotten px after the numbers in the other media queries.
Your orange border will never work by the way because the blue media query is overriding it since you have max-width on both.
To make this work you should add a media query that activates between a set of screen widths. I take it that you want the blue border between 800 and 850. So the code would look like this:
#media only screen and (min-width: 800px) and (max-width: 850px) {
.mainNavi2{
border:1px solid blue;
}
}
Another solution is to rearrange the order of them so that the 800px query overrides the 850px one.
It's because of the order of your media queries. Also I think you could do this with less media queries.
.mainNavi2 {
border:1px solid green;
}
#media only screen and (max-width: 850px) {
.mainNavi2 {
border:1px solid blue;
}
}
#media only screen and (max-width: 800px) {
.mainNavi2 {
border:1px solid orange;
}
}
Fiddle: http://jsfiddle.net/skeurentjes/q9ae3r7p/7/
Related
I am trying to do tests with media queries but it does not apply the max-width, instead the min width does
I leave my css code
body{
background: grey;
}
#media (max-width: 500px) {
body {
background-color:violet;}
}
#media (min-width: 1220px) {
body{
background-color: tomato;
}
}
any idea why it happens?
Your code works, if width less then 500, background-color:violet;
if width much then 1220, background-color: tomato; and between background: grey;
#media only screen and (min-width: 275px)
{
body
{
background-color: black;
}
}
I want to make the background color black when it detects 275px - 500px and i want to make the background color blue when it detects 500px - 750px.This is a reference only simply i want to make css codes with different ranges
Also you can write first media query only min width because another media query also set min width.
#media only screen and (min-width: 275px) {
body {
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px) {
body {
background-color: blue;
}
}
Just add a max-width to complete the range:
#media only screen and (min-width: 275px) and (max-width: 500px)
{
body
{
background-color: black;
}
}
#media only screen and (min-width: 501px) and (max-width: 750px)
{
body
{
background-color: blue;
}
}
Here am using this two media query ,as I read ,First MediaQuery would affect background-color if size of screen size is equal or less then 340px ,where as 2nd MediaQuery would effect if size of screen is less then or equal to 360px...
#media only screen and (max-width: 340px) {
#arf_recaptcha_hruwj8 iframe {
background-color: blue;
}
}
#media only screen and (max-width: 360px) {
#arf_recaptcha_hruwj8 iframe {
background-color: red;
}
}
What i thought is if size is under 340px,1st query would effect and because we are under 340px now. not in 360px.But instead of becoming blue ,it remain red only.
1.Could You please explain me this confusion ?
2.How to write media query so that when its between 341px and 360px It should be red and when <= 340px i have to be blue.
Just swipe your media query and check it will work for sure.
#media only screen and (max-width: 360px) {
iframe {
background-color: red;
}
}
#media only screen and (max-width: 340px) {
iframe {
background-color: blue;
}
}
It's about precedence(CSS Specificity). Last one always applies if you are applying using same selector. As It reads code/file from top to bottom.
#idid{
height: 50px;
width: 50px;
background-color: red;
}
#media only screen and (max-width: 360px) {
#idid {
background-color: black;
}
}
#media only screen and (max-width: 340px) {
#idid {
background-color: blue;
}
}
JSBin link: JSBin LInk
You can also try css specificity here: CSS Specificity checker
#media only screen and (max-width: 360px) and (min-width: 340px)
{
body {
background-color:red ;
}
}
#media only screen and (max-width: 339px) {
body {
background-color: blue;
}
It's about precedence media query. Last one always applies if you are applying using same selector. swipe the code itz works perfectly
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.