I'm building a responsive site but when I resize the window the media queries aren't corresponding with my screen resolution, so for instance,
#media screen and (min-width:640px) and (max-width: 800px) is resulting in these design elements to be when the screen is above 800 pixels and when I'm at 700 pixels my designs are being set to #media screen and (min-width: 400px) and (max-width:640px) for some reason. Does anyone know why this could be happening?
Update: The max-width 640px media query is being set to my screen at over 700 pixels still.
#media screen and (max-width: 1024px) {
.body{
width:800px;
}
}
#media screen and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
To start troubleshooting, double check that in the head of your document you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Let me know how you get on.
Edit
Thanks for the extra code. Check out this working example. The CSS and the order of the media queries is below:
/* set default */
.body{
width:800px;
}
#media screen and (max-width:400px) {
.body {
width:260px;
}
}
#media screen and (min-width: 401px) and (max-width:640px) {
.body {
width:480px;
}
}
#media screen and (min-width: 641px) and (max-width: 800px) {
.body {
width:600px;
}
}
#media screen and (min-width: 801px) and (max-width: 1024px) {
.body{
width:800px;
}
}
Related
Ive been trying to make a change of my category images depending on screen size. But right now only the first screen width size are being used. It seems as though the other ones are being overridden by the first row of code (max-width: 769px). (on this site: http://origami.directory/)
What can I do so it changes 3 times as it should do?
.category-list-item {
float: left;
padding: 1em;
}
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
};
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
};
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
};
If someone could help me fix this I would be super grateful!
/ Martin
Remove the extra semi-colon ; from the end of your queries.
Your queries should be like this:
#media screen and (max-width: 769px) {
.category-list-item { width: 20%; }
}
#media screen and (min-width: 480px) {
.category-list-item { width: 25%; }
}
#media screen and (max-width: 480px) {
.category-list-item { width: 33.33%; }
}
Your queries are conflicting with each other making the second query obsolete. Specify a range for each like this:
#media (max-width: 480px) {
.category-list-item{width: 33.33%;}
}
#media (min-width: 481px) and (max-width: 768px) {
.category-list-item { width: 25%; }
}
#media (min-width: 769px) {
.category-list-item { width: 20%; }
}
I'm not very sure with the min-width:769px part so just let me know what exactly are you trying to do and I'll fix that accordingly. The above is just to show you how queries work basically.
I am trying to make a simple webpage responsive but somehow, after the first breaking point, nothing happens. I put the whole code in this fiddle: https://jsfiddle.net/Cilvako/umwhLdqx/
Bellow are the breakpoints I am trying to use but still haven't got to the third since I couldn't make the second work.
/Media Query/
#media screen and (min-device-width : 1px) and (max-device-width : 480px) {
}
#media screen and (min-width : 481px) and (max-width : 768px) {
}
#media screen and (min-width : 769px) and (max-width : 1200px) {
}
#media only screen and (min-width : 1200px) {
}
Don't mix device-width with the normal width if you can. Simply use min-width and max-width if you're targeting only browser window size.
Read this if you're confused CSS media queries min-width and min-device-width conflicting?
You are supposed to write CSS in the media queries and also close and open them properly using '{' and '}' which you are not on the fiddle.
A media query looks something like
#media screen and (min-width : 769px) and (max-width : 1199px) {
h1 { color: blue; }
}
#media screen and (min-width : 1200px) and (max-width : 1800px) {
h1 { color: green; }
}
So between 769px and 1199px, h1s would be blue, and between 1200px and 1800px they would be green. I'm not seeing that in your JSFiddle - the brackets are not closed properly, and I can't see what you're trying to do with the rules.
You almost never ever ever need a max-width
fiddle
body {
background: gray;
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 500px) {
body {
background: red;
}
}
#media screen and (min-width: 800px) {
body {
background: lightblue;
}
}
#media screen and (min-width: 1000px) {
body {
background: orange;
}
}
#media screen and (min-width: 1300px) {
body {
background: pink;
}
}
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>
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.
I recently started learning responsive design for mobiles etc and i am using troy.labs.daum.net to test on, it started out working fine on my first two media queries although when I choose from the resolution list now it only shows the 400px width query
heres my css
#media only screen and max-width 320px {
#searcher
{
width:190px;
height:30px;
float:left;
}
#searcherin
{
width:185px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
#media only screen and max-width 360px {
#searcher
{
width:230px;
height:30px;
float:left;
}
#searcherin
{
width:225px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
#media only screen and max-width 400px {
#searcher
{
width:268px;
height:30px;
float:left;
}
#searcherin
{
width:264px;
height:16px;
margin-top:6px;
border:1px solid #ccc;
padding-left:4px;
text-transform:capitalize;
}
}
Am I doing something wrong with this?
The links is http://2click4.com/new/mobile/home.php
Reverse the order start with the biggest and have the smallest at the end. For smaller size, you only need to define the rules that changed between the current size and the previous as the 360 will carry the rules from 400 and above.
#media only screen and (max-width: 400px) { ... }
#media only screen and (max-width: 360px) { ... }
#media only screen and (max-width: 320px) { ... }
http://jsfiddle.net/88wgM/
Resize the viewing area and see the change, if you reverse it like in your code, it does not work
Make sure you have
(max-width: 400px)
the () and : after max-width
When you starting develop responsive design its very important you specify the orientation!
/*Tablet devices*/
#media only screen and (min-width: 0px) and (max-width: 320px) and (orientation: landscape) {
...
}
/*Tablet devices*/
#media only screen and (min-width: 321px) and (max-width: 360px) and (orientation: landscape) {
...
}
/*Tablet devices*/
#media only screen and (min-width: 361px) and (max-width: 400px) and (orientation: landscape) {
...
}
First off all you need to specify the lowest width devices. Then you move to biggest ones!
Here is a good boilerplate you can use to start your media queries in your stylesheet.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */