Media Queries

[graphicz]

When doing custom designs in SD14 I have been a bit thwarted by SD's media queries being rather different to other sets of media queries I have used.

SellerDeck uses 101 media queries (Dear Sir, is this a record?) They are listed at the end of this post for the curious.

This distills roughly down to the following listed along with what happens at the specified browser width - this is from the default Smart layout:

/*1135 - search bar shortens*/
@media screen and (max-width:1135px){}

/*1061 - three cols to two products*/
@media screen and (max-width:1061px){}

/*1061 - three cols to two Sections*/
@media screen and (max-width:1061px) {}

/*1060 - four cols to two - new products - best sellers*/
@media screen and (max-width:1060px){}

/*1024 - search bar shortens*/
@media screen and (max-width:1024px){}

/*912 - search bar shortens*/
@media screen and (max-width:912px){}

/*800 - side bars go to bottom and +- drop down menu - top contact appears - best sellers and new products go from two to three as sidebars gone. Sections two to one*/
@media screen and (max-width:800px){}

/*768 - search bar shortens*/
@media screen and (max-width:768px){}

/*731 - Home and login go to symbols only on left*/
@media screen and (max-width:732px){}

/*685 - smart logo goes above search*/
@media screen and (max-width:685px){}

/*665 - three cols to two - new products - best sellers*/
@media screen and (max-width:660px) {}

/*514 - search bar shortens*/
@media screen and (max-width:514px){}

/*481 - Two product to one*/
@media screen and (max-width:481px) {}

/*430 - two cols to one - new products - best sellers*/
@media screen and (max-width:430px){}

/*420 - search bar shortens*/
@media screen and (max-width:420px){}

/*360 - icons at top move a bit*/
@media screen and (max-width:360px){}

I am not saying this is comprehensive or foolproof (no warranties expressed or implied) but it may be of some help. Please do correct and enlarge freely.

Now for the curious:

@media screen and (max-device-width:360px) {}
@media screen and (max-device-width:800px) {}
@media screen and (max-width:300px) {}
@media screen and (max-width:360px) {}
@media screen and (max-width:360px) {}
@media screen and (max-width:360px){}
@media screen and (max-width:367px) {}
@media screen and (max-width:371px){}
@media screen and (max-width:398px) {}
@media screen and (max-width:405px){}
@media screen and (max-width:409px) {}
@media screen and (max-width:420px){}
@media screen and (max-width:430px){}
@media screen and (max-width:430px){}
@media screen and (max-width:440px) {}
@media screen and (max-width:440px){}
@media screen and (max-width:454px){}
@media screen and (max-width:462px) {}
@media screen and (max-width:464px) {}
@media screen and (max-width:481px) {}
@media screen and (max-width:481px) {}
@media screen and (max-width:481px) {}
@media screen and (max-width:481px) {}
@media screen and (max-width:481px) {}
@media screen and (max-width:484px) {}
@media screen and (max-width:494px) {}
@media screen and (max-width:495px) {}
@media screen and (max-width:495px) {}
@media screen and (max-width:500px) {}
@media screen and (max-width:500px){}
@media screen and (max-width:514px){}
@media screen and (max-width:517px){}
@media screen and (max-width:560px) {}
@media screen and (max-width:560px) {}
@media screen and (max-width:580px) {}
@media screen and (max-width:580px) {}
@media screen and (max-width:592px) {}
@media screen and (max-width:593px){}
@media screen and (max-width:600px) {}
@media screen and (max-width:600px) {}
@media screen and (max-width:600px) {}
@media screen and (max-width:600px) {}
@media screen and (max-width:600px){}
@media screen and (max-width:660px) {}
@media screen and (max-width:676px) {}
@media screen and (max-width:680px) {}
@media screen and (max-width:685px){}
@media screen and (max-width:717px){}
@media screen and (max-width:732px){}
@media screen and (max-width:768px){}
@media screen and (max-width:800px) {}
@media screen and (max-width:800px){}
@media screen and (max-width:818px){}
@media screen and (max-width:892px){}
@media screen and (max-width:912px){}
@media screen and (max-width:1024px){}
@media screen and (max-width:1060px){}
@media screen and (max-width:1061px) {}
@media screen and (max-width:1061px){}
@media screen and (max-width:1100px) {}
@media screen and (max-width:1135px){}
@media screen and (max-width:1165px) {}
@media screen and (max-width:1183px){}
@media screen and (max-width:1220px) {}
@media screen and (max-width:1304px) {}
@media screen and (max-width:1350px) {}
@media screen and (min-width:431px) and (max-width:665px) {}
@media screen and (min-width:462px) and (max-width:481px) {}
@media screen and (min-width:462px) and (max-width:481px) {}
@media screen and (min-width:482px) and (max-width:514px) {} 
@media screen and (min-width:482px) and (max-width:600px) {} 
@media screen and (min-width:482px) and (max-width:640px) {}
@media screen and (min-width:482px) and (max-width:800px) {}
@media screen and (min-width:577px) and (max-width:602px) {}
@media screen and (min-width:577px) and (max-width:602px) {}
@media screen and (min-width:601px) and (max-width:720px) {}
@media screen and (min-width:800px) and (max-width:869px) {}
@media screen and (min-width:800px) and (max-width:887px) {}
@media screen and (min-width:801px) and (max-width:1060px){}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1061px) {}
@media screen and (min-width:801px) and (max-width:1071px) {}
@media screen and (min-width:801px) and (max-width:1100px) {}
@media screen and (min-width:801px) and (max-width:1110px) {}
@media screen and (min-width:801px) and (max-width:1170px) {}
@media screen and (min-width:801px) and (max-width:1570px) {}
@media screen and (min-width:801px) and (max-width:1694px) {}
@media screen and (min-width:801px) and (max-width:830px) {}
@media screen and (min-width:801px) and (max-width:866px){}
@media screen and (min-width:801px) and (max-width:890px) {}
@media screen and (min-width:1024px) and (max-width:1110px) {}
@media screen and (min-width:1039px) and (max-width:1061px) {}
@media screen and (min-width:1039px) and (max-width:1061px) {}

Thanks

Jonathan