Identify Mobile / Tablet / Desktop Using Screen-size in CSS
Add these to your CSS stylesheet as necessary.
CSS to be used only on Mobile devices
This CSS will be used when the screen width is less than 576px.
@media screen and (max-width: 576px) {
.selector {
property: value;
}
}CSS to be used on anything BUT Mobile phones
This CSS will be used when the screen width is greater than 576px.
@media screen and (min-width: 576px) {
.selector {
property: value;
}
}CSS to be used only on Tablets
This CSS will be used when the screen width is between 576px and 768px.
@media screen and (min-width: 576px) and (max-width: 768px) {
.selector {
property: value;
}
}
