Resend. Please discard previous ones.
Thank you very much! Yes, this works! I didn't realize order could be an issue.
I took a look at that boston global site that everybody was talking the other
day, it has this order:
@media screen and (min-width:480px)
@media screen and (min-width:620px)
@media screen and (min-width:810px)
@media screen and (min-width:1400px)
@media screen and (max-width:810px)
@media screen and (max-width: 810px), print
@media screen and (min-width: 380px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 480px) and (max-width: 639px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 810px)
@media screen and (min-width: 980px)
@media screen and (min-width: 1220px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px)
@media screen and (min-width: 620px)
@media screen and (max-width: 810px)
@media screen and (min-width: 900px)
@media screen and (min-width: 960px)
@media screen and (min-width: 1200px)
@media screen and (min-width:810px)
@media screen and (min-width: 1200px)
@media screen and (max-width: 620px)
@media screen and (max-width: 620px), print
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 800px), print
@media screen and (min-width: 900px), print
In my site, this is what I have and apart from the body image not showing if no
id/class assigned, some of the rules (e.g. unfloat floated boxes) also couldn't
pick up correctly
@media screen and (max-device-width: 810px) {
* { -webkit-text-size-adjust: 100%; }
}
@media screen and (min-width:810px)
@media screen and (max-width:360px)
@media screen and (max-width:480px)
@media screen and (max-width:768px)
@media screen and (max-width:1024px)
@media screen and (min-width:1024px)
tee
On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote:
> On 9/19/11 3:02 PM, tee wrote:
>> Please see this.
>>
>> http://bit.ly/mWvfWC
>
> It appears to work the way I *think* you want it to if you order the
> css statements as:
>
> @media screen and (max-width:1024px){ body { background:red} }
>
> @media screen and (max-width:768px) { body { background-color: black; } }/*do
> not delete*/
>
> @media screen and (max-width:480px) { body { background-color:olive; } }/*do
> not delete*/
>
> @media screen and (min-width:1024px){ body { background: blue
> url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/
>
> But let me know if that's an incorrect assumption :-)
>
> --
> Hassan Schroeder ----------------------------- [email protected]
> webtuitive design === (+1) 408-621-3445 === http://webtuitive.com
> http://about.me/hassanschroeder
> twitter: @hassan
> dream. code.
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [email protected]
> *******************************************************************
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
