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