responsive design - css favouring biggest resolution media query - html

Question

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

Answer 1

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

Answer 2

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!

Answer 3

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 */