Media Queries breakdown
/* Media Queries used for mobile first device size classes */
/* For phone classes */
@media only screen { } /* For mobile styles */
/* For Tablet Classes */
@media only screen and (min-width: 48em) { } /* min-width 768px for Tablet styles */
/* For Laptop Classes */
@media only screen and (min-width: 62em) { } /* min-width 992px for laptop to small desktop styles /*
/* For Desktop Classes */
@media only screen and (min-width: 75em) { } /* min-width 1200px medium to large Desktop styles /*
/* Others Media Queries used for devices with min and max used with show and hide classes*/
@media only screen and (max-width: 47.938em) { } /* Up to 767px */
@media only screen and (min-width: 48em) and (max-width: 61.938em) { } /* 768px to 991px */
@media only screen and (min-width: 62em) and (max-width: 74.938em) { } /* 992px to 1199px */
@media only screen and (min-width: 75em) { } /* 1200px and up */
/* Used to stack columns 480px and under */
@media only screen and (max-width: 30em){ } /* max-width 30em 480px */