Sunday 18 August 2019

Targeting Specific Devices in your Style Sheets

@media only screen and (max-device-width: 480px) {
 /* define mobile specific styles come here */
 .hover_info a {
 font-size: 8px;
 margin-top: -15px;
 }
 }

@media only screen and (max-device-width: 320px) {
 .hover_info a {
 font-size: 10px !important;
 margin-top: -16px !important;
 }
 }

@media only screen and (max-device-width: 360px) {
 .hover_info a {
 font-size: 28px !important;
 margin-top: -12px !important;
 }
 }

For specifying a specific range we do the following:
 @media (min-width: 980px) and (max-width:1100px){

.hover_info a {
 font-size: 28px !important;
 margin-top: -12px !important;
 }

}