scottfontenot
7/3/2017 - 7:56 PM
Responsive-CSS for Desktop and Mobile
Responsive-CSS for Desktop and Mobile
// This applies from 0px to 600px
body {
background: red;
}
// This applies from 600px onwards
@media (min-width: 600px) {
body {
background: green;
}
}
// This applies from 600px onwards
body {
background: green;
}
// This applies from 0px to 600px
@media (max-width: 600px) {
body {
background: red;
}
}
// Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76
// Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6
// Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
// Laptops and Desktops: 800, 1024, 1050, 1200, 1536
/** Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76
Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6
Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
Laptops and Desktops: 800, 1024, 1050, 1200, 1536
*/
/*********************************** Notes on Mobile First ****************************************/
/** Defaults that is set is for mobile
Settings you override @media goes to desktop
*/
/*********************************** End Notes on Mobile First ****************************************/
/*********************************** Mobile First ****************************************/
/*********************************** Mobile ****************************************/
/** Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76*/
/** This applies from 0px to 222px */
body {
background: red;
}
/** IP 4-5-5s Support */
/** This applies from 222px onwards */
@media screen and (min-width: 222px) {
body {
background: green;
}
}
}
/** IP 5c Support */
/** This applies from 224px onwards */
@media screen and (min-width: 224px) {
body {
background: blue;
}
}
/** Samsung s4 Support */
/** This applies from 231px onwards */
@media screen and (min-width: 231px) {
body {
background: blue;
}
}
/** Samsung S5 mini 246 px */
/** This applies from 246 px onwards */
@media screen and (min-width: 246px) {
body {
background: blue;
}
}
/** IP 6 Support */
/** This applies from 254px onwards */
@media screen and (min-width: 254px) {
body {
background: blue;
}
}
/** Samsung S4 */
/** This applies from 265px onwards */
@media screen and (min-width: 265px) {
body {
background: blue;
}
}
/** Samsung S4 */
/** This applies from 276px onwards */
@media screen and (min-width: 276px) {
body {
background: blue;
}
}
/** IP 6 Plus Support */
/** This applies from 294px onwards */
@media screen and (min-width: 294px) {
body {
background: yellow;
}
}
/*********************************** End Mobile ****************************************/
/*********************************** SMall Tab ****************************************/
/** Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6 */
/** Fire HD 6 */
/** This applies from 394px onwards */
@media screen and (min-width: 394px) {
body {
background: blue;
}
}
/** Galaxy Tab 3 */
/** This applies from 442px onwards */
@media screen and (min-width: 254px) {
body {
background: blue;
}
}
/** Toshiba Excite Go */
/** This applies from 452px onwards */
@media screen and (min-width: 452px) {
body {
background: blue;
}
}
/** Fire HD 7 */
/** This applies from 480px onwards */
@media screen and (min-width: 480px) {
body {
background: blue;
}
}
/** Ipad Mini Support */
/** This applies from 509px onwards */
@media screen and (min-width: 509px) {
body {
background: yellow;
}
}
/*********************************** End Small Tab ****************************************/
/*********************************** Large Tab ****************************************/
/** Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
/** HTC Nexus */
/** This applies from 581px onwards
@media screen and (min-width: 581px) {
body {
background: blue;
}
}
/** Fire HDX 8.9 */
/** This applies from 596px onwards */
@media screen and (min-width: 596px) {
body {
background: blue;
}
}
/** IPad 2 */
/** This applies from 634px onwards */
@media screen and (min-width: 634px) {
body {
background: blue;
}
}
/** Acer Icona Tab */
/** This applies from 647px onwards */
@media screen and (min-width: 647px) {
body {
background: blue;
}
}
/** Samsung Galaxy Support */
/** This applies from 768px onwards */
@media screen and (min-width: 768px) {
body {
background: yellow;
}
}
/*********************************** End large Tab ****************************************/
/*********************************** Laptop Desktop ****************************************/
/** Size 800 */
/** This applies from 800px onwards */
@media screen and (min-width: 800px ) {
body {
background: blue;
}
}
/** Size 1024 */
/** This applies from 1024px onwards */
@media screen and (min-width: 1024px) {
body {
background: blue;
}
}
/** Size 1050 */
/** This applies from 1050px onwards */
@media screen and (min-width: 1050px) {
body {
background: blue;
}
}
/** Size 1200 */
/** This applies from 1200px onwards */
@media screen and (min-width: 1200px) {
body {
background: blue;
}
}
/** Size 1536 */
/** This applies from 1536px onwards */
@media screen and (min-width: 1536px) {
body {
background: yellow;
}
}
/*********************************** End Laptop Desktop ****************************************/
/*********************************** End Mobile First ****************************************/Need to flip the code....see mobile first code
/** Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76
Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6
Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
Laptops and Desktops: 800, 1024, 1050, 1200, 1536
*/
/*********************************** Desktop First ****************************************/
/*********************************** Notes on Desktop First ****************************************/
/** Defaults that is set is for desktop
Settings you override @media goes to mobile
*/
/*********************************** Desktop Firstt ****************************************/
/*********************************** Mobile ****************************************/
/* Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76 */
/*********************************** SMall Tab ****************************************/
/** IP 4-5-5s Support */
/** This applies from 0px to 222px */
@media screen and (max-width: 222px) {
}
/** IP 5c Support */
/** This applies from 222px to 224px */
@media screen and (max-width: 224px) {
}
/** Samsung s4 Support */
/** This applies from 224px to 231px */
@media screen and (max-width: 231px) {
}
/** Samsung S5 mini 231px to 246px */
/** This applies from 246 px */
@media screen and (max-width: 246px) {
}
/** IP 6 Support */
/** This applies from 246px to 254px */
@media screen and (max-width: 254px) {
}
/** Samsung S4 */
/** This applies from 254px to 265px */
@media screen and (max-width: 265px) {
}
/** Samsung S4 */
/** This applies from 265px to 276px */
@media screen and (max-width: 276px) {
}
/** IP 6 Plus Support */
/** This applies from 276px to 294px */
@media screen and (max-width: 294px) {
}
/*********************************** End Mobile ****************************************/
/*********************************** SMall Tab ****************************************/
/** Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6 */
/** Fire HD 6 */
/** This applies from 294px to 394px */
@media screen and (max-width: 394px) {
}
/** Galaxy Tab 3 */
/** This applies from 394px to 442px */
@media screen and (max-width: 254px) {
}
/** Toshiba Excite Go */
/** This applies from 442px to 452px */
@media screen and (max-width: 452px) {
}
/** Fire HD 7 */
/** This applies from 452px to 480px */
@media screen and (max-width: 480px) {
}
/** Ipad Mini Support */
/** This applies from 480px to 509px */
@media screen and (max-width: 509px) {
}
/*********************************** End Small Tab ****************************************/
/*********************************** Large Tab ****************************************/
/**Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
/** HTC Nexus */
/** This applies from 509px to 581px */
@media screen and (max-width: 581px) {
}
/** Fire HDX 8.9 */
/** This applies from 581px to 596px */
@media screen and (max-width: 596px) {
}
/** IPad 2 */
/** This applies from 596px to 634px */
@media screen and (max-width: 634px) {
}
/** Acer Icona Tab */
/** This applies from 634px to 647px */
@media screen and(max-width: 647px) {
}
/** Samsung Galaxy Support */
/** This applies from 647px to 768px */
@media screen and (max-width: 768px) {
}
/*********************************** End large Tab ****************************************/
/*********************************** Laptop Desktop ****************************************/
/** Size 800 */
/** This applies from 768px to 800px */
@media screen and (max-width: 800px ) {
}
/** Size 1024 */
/** This applies from 800px to 1024px */
@media screen and (max-width: 1024px) {
}
/** Size 1050 */
/** This applies from 1024px to 1050px */
@media screen and (max-width: 1050px) {
#main-content .grid-inner {
padding: 10px 20px 20px 20px;
}
}
/** Size 1200 */
/**This applies from 1050px to 1200px */
@media screen and (max-width: 1200px) {
}
/** Size 1536 */
/** This applies from 1200px to 1536px */
@media screen and (max-width: 1536px) {
}
/*********************************** End Laptop Desktop ****************************************/
/*********************************** End Desktop First ****************************************/// This applies from 0px to 600px
body {
background: red;
}
// This applies from 600px onwards
@media (min-width: 600px) {
body {
background: green;
}
}
// This applies from 600px onwards
body {
background: green;
}
// This applies from 0px to 600px
@media (max-width: 600px) {
body {
background: red;
}
}
// Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76
// Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6
// Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
// Laptops and Desktops: 800, 1024, 1050, 1200, 1536
/** Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76
Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6
Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
Laptops and Desktops: 800, 1024, 1050, 1200, 1536
*/
/*********************************** Notes on Mobile First ****************************************/
/** Defaults that is set is for mobile
Settings you override @media goes to desktop
*/
/*********************************** End Notes on Mobile First ****************************************/
/*********************************** Mobile First ****************************************/
/*********************************** Mobile ****************************************/
/** Mobile Phones: IP6 Plus 293.76, Samsung S5 275.9, Samsung S4 264.5 ,IP 6 253.44, Samsung S5 mini 245.6px, Samsung s4 230.5, IP5c 223.68, IP 4-5-5s 221.76*/
/** This applies from 0px to 222px */
body {
background: red;
}
/** IP 4-5-5s Support */
/** This applies from 222px onwards */
@media screen and (min-width: 222px) {
body {
background: green;
}
}
}
/** IP 5c Support */
/** This applies from 224px onwards */
@media screen and (min-width: 224px) {
body {
background: blue;
}
}
/** Samsung s4 Support */
/** This applies from 231px onwards */
@media screen and (min-width: 231px) {
body {
background: blue;
}
}
/** Samsung S5 mini 246 px */
/** This applies from 246 px onwards */
@media screen and (min-width: 246px) {
body {
background: blue;
}
}
/** IP 6 Support */
/** This applies from 254px onwards */
@media screen and (min-width: 254px) {
body {
background: blue;
}
}
/** Samsung S4 */
/** This applies from 265px onwards */
@media screen and (min-width: 265px) {
body {
background: blue;
}
}
/** Samsung S4 */
/** This applies from 276px onwards */
@media screen and (min-width: 276px) {
body {
background: blue;
}
}
/** IP 6 Plus Support */
/** This applies from 294px onwards */
@media screen and (min-width: 294px) {
body {
background: yellow;
}
}
/*********************************** End Mobile ****************************************/
/*********************************** SMall Tab ****************************************/
/** Small Tablets: Ipad Mini 508.8, Fire HD 7 480, Toshiba Excite Go 451.2, Galaxy Tab 3 441.6, Fire HD 6 393.6 */
/** Fire HD 6 */
/** This applies from 394px onwards */
@media screen and (min-width: 394px) {
body {
background: blue;
}
}
/** Galaxy Tab 3 */
/** This applies from 442px onwards */
@media screen and (min-width: 254px) {
body {
background: blue;
}
}
/** Toshiba Excite Go */
/** This applies from 452px onwards */
@media screen and (min-width: 452px) {
body {
background: blue;
}
}
/** Fire HD 7 */
/** This applies from 480px onwards */
@media screen and (min-width: 480px) {
body {
background: blue;
}
}
/** Ipad Mini Support */
/** This applies from 509px onwards */
@media screen and (min-width: 509px) {
body {
background: yellow;
}
}
/*********************************** End Small Tab ****************************************/
/*********************************** Large Tab ****************************************/
/** Large Tablets: Samsung Galaxy 768, IPad 2 633.6, Acer Icona Tab 646.08, Fire HDX 8.9model 595.2, HTC Nexus 580.8
/** HTC Nexus */
/** This applies from 581px onwards
@media screen and (min-width: 581px) {
body {
background: blue;
}
}
/** Fire HDX 8.9 */
/** This applies from 596px onwards */
@media screen and (min-width: 596px) {
body {
background: blue;
}
}
/** IPad 2 */
/** This applies from 634px onwards */
@media screen and (min-width: 634px) {
body {
background: blue;
}
}
/** Acer Icona Tab */
/** This applies from 647px onwards */
@media screen and (min-width: 647px) {
body {
background: blue;
}
}
/** Samsung Galaxy Support */
/** This applies from 768px onwards */
@media screen and (min-width: 768px) {
body {
background: yellow;
}
}
/*********************************** End large Tab ****************************************/
/*********************************** Laptop Desktop ****************************************/
/** Size 800 */
/** This applies from 800px onwards */
@media screen and (min-width: 800px ) {
body {
background: blue;
}
}
/** Size 1024 */
/** This applies from 1024px onwards */
@media screen and (min-width: 1024px) {
body {
background: blue;
}
}
/** Size 1050 */
/** This applies from 1050px onwards */
@media screen and (min-width: 1050px) {
body {
background: blue;
}
}
/** Size 1200 */
/** This applies from 1200px onwards */
@media screen and (min-width: 1200px) {
body {
background: blue;
}
}
/** Size 1536 */
/** This applies from 1536px onwards */
@media screen and (min-width: 1536px) {
body {
background: yellow;
}
}
/*********************************** End Laptop Desktop ****************************************/
/*********************************** End Mobile First ****************************************/