How to add CSS Code for Mobile, Tablets and Laptop/PC using min-width and max-width

css-for-mobile-only

Today more than 80% of users use mobiles phones to browse websites. So it is necessary your website provide great experience on mobile devices. So soemtimes it’s necessary to use CSS code for Mobile or desktop so they look best on all devices.

CSS for mobile devices

/* Smartphones  ----------- */
@media only screen and (max-width : 480px) {
/* Styles */
}

CSS for Tablet devices

/* Tablets  ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
/* Styles */
}

CSS for Desktop Only

/* Desktops and Laptop  ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

Hope above CSS code helps you. Let me know in comments if you need more help or face some issues.

Leave a Comment