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.
Related
#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
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
I have a div (circle) and text that I want to show only on desktop.
<div class="circle">Text Here</div>
I can hide the circle fine using this:
#media screen and (min-width: 600px) {
.circle{
//Circle design
}
}
However, the 'Text Here' within the Div still shows.
Anyone know how to hide the text too?
Thanks!
If the browser window is smaller than 600px, show the element with class="circle"
.circle {
display: none;
}
#media screen and (max-width: 600px) {
.circle {
display: block;
}
}
<div class="circle">Text Here</div>
Simply add display:none;in your media query.
#media screen and (max-width: 600px) {
.circle {
display:none;
}
}
Right now it's displayed as a block but now it'll be displayed as none when it hits 600px wide.
To achieve expected result, use below
CSS:
.circle{
display:none;
}
#media screen and (min-width: 600px){
.circle{
display:block;
}
}
Option 2:
CSS
.circle{
visibility:hidden;
}
#media screen and (min-width: 600px){
.circle{
visibility:visible;
}
}
Option3:
#media screen and (max-width: 600px){
.circle{
display:none;
}
}
codepen URL for reference - https://codepen.io/nagasai/pen/JNXypz
So I am having a noob issue, one that is annoying me greatly. So I have the following type of style sheet:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
#media (min-width: 960px) {
}
#media (min-width: 768px) {
}
#media (min-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
}
#media (min-width: 480px) {
#content .post-content .row .col-md-6 .box-top {
width: 353px;
}
}
Now the issue is that anything over 641px will use the 640px rule. Even if the screen is 1920x1200. I think its because I don't have a width defined for the original element? if thats case, I slap a width on the original element of 453px:
#content .post-content .row .col-md-6 .box-top {
...
width: 453px;
}
But the problem is, its almost like the #media rule has precedence, because in the crhome inspector when the width is 1366px, it still uses the 640px rule instead of the width I just defined. Now I was thinking of, instead of doing: (min-width: xyzpx) I would use max-width but that seems to take a way the smooth scaling down affect that the client wants, they don't want it jumping between media sizes.
Should my element have a max-width of 453px to override the #media rule?
#content .post-content .row .col-md-6 .box-top {
...
max-width: 453px; /** or a min-width: 453px **/
}
Essentially my questions are:
Why is my #media rule overriding any other rule on the page. In this case why is it using the width in the 640 rule to apply to anything above when the original definition of the element in question does not specific a width?
And
Why is when I specify a width for that original definition of the element, that the #media rule, which defined a new width at 640px overrides it, especially when the windows width is say 1366px?
From what I understand your issue is that you want to apply the Non-Mobile First Method, and by using that you have to use the max-width instead of min-width
like this:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width : 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width : 320px) {
/*your CSS Rules*/
}
or if you want to use the Mobile First Method then you should use min-width but this way:
/*========== Mobile First Method ==========*/
#media only screen and (min-width : 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width : 960px) {
/*your CSS Rules*/
}
Below is a snippet from what I understand it is what you are looking for:
#content .post-content .row .col-md-6 .box-top {
background: #714f46;
padding: 10px;
color: #fff;
text-align: center;
font-family: "custom-script,arial";
position: relative;
height: 52px;
font-size: 34px;
padding-top: 12px;
}
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
#content .post-content .row .col-md-6 .box-top {
width: 453px;
}
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
<div id="content">
<div class="post-content">
<div class="row">
<div class="col-md-6">
<div class="box-top">Something
</div>
</div>
</div>
</div>
</div>
Try reversing order of your media queries. Smallest min-width first.
Say your window width is 700px. Then (min-width: 960px) and (min-width: 768px) does not match and are skipped but both (min-width: 640px) and (min-width: 480px) do match styles inside these blocks are applied in order they appear in CSS file. And later styles override previous styles, e.g.:
p { color: green; }
p { color: red; }
Your p color would be red.
This live example may be a bit clearer: http://jsbin.com/yuqigedudi/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
/* Default color when no media queries bellow match.
In this our case when window width < 200px */
p { color: black }
/* If window size >= 200px */
#media (min-width: 200px) {
p { color: red }
}
/* If window size >= 300px */
#media (min-width: 300px) {
p { color: orange }
}
/* If window size >= 400px */
#media (min-width: 400px) {
p { color: blue }
}
</style>
</head>
<body>
<p>
Resize this frame and see my color change!
</p>
</body>
</html>