Drupal Web Design 

Delaware Web Design & Drupal eCommerce Websites

Does your website display on all mobile devices correctly?

Drupal 7 Adding Custom CSS for Targeting Mobile Devices

/* iPhone 4 Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 320px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 4 Landscape */
@media only screen and (min-device-width: 480px) and (max-device-width: 480px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 5 Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 5 Landscape */
@media only screen and (min-device-width: 568px) and (max-device-width: 568px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 6 Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (orientation : portrait) {
/* Styles */
}
/* iPhone 6 Landscape */
@media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) {
/* Styles */
}
/* iPhone 6 Plus, 7 & 7 Plus Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 414px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 6 Plus, 7 & 7 Plus Landscape */
@media only screen and (min-device-width:736px) and (max-device-width:736px) and (orientation:landscape) {
/* Styles */
}

/* iPhone 10 Portrait */
@media only screen and (max-device-width: 375px) and (min-device-width: 375px) and (orientation: portrait) {
/* Styles */
}
/* iPhone 10 Landscape */
@media only screen and (min-device-width:812px) and (max-device-width:812px) and (orientation:landscape) {
/* Styles */
}

 

/* Galaxy S5 Portrait */
@media screen and (min-device-width: 360px) and (max-device-width: 360px) and (orientation: portrait) {
/* Styles */
}
/* Galaxy S5 Landscape */
@media screen and (min-device-width: 640px) and (max-device-width: 640px) and (orientation: landscape) {
/* Styles */
}

 

/* Google Nexus 4 Portrait */
@media screen and (min-device-width: 384px) and (max-device-width: 384px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 4 Landscape */
@media screen and (min-device-width: 640px) and (max-device-width: 380px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 5 Portrait NOTE: (min-device-width: 360px) and (max-device-width: 360px)
Same as Galaxy S5 Portrait Be careful of overrides! */
@media screen and (min-device-width: 360px) and (max-device-width: 360px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 5 Landscape NOTE: (min-device-width: 640px) and (max-device-width: 640px)
Same as Galaxy S5 Landscape & Google Nexus 4 Landscape. Be careful of overrides! */
@media screen and (min-device-width: 640px) and (max-device-width: 640px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 6 Portrait */
@media screen and (min-device-width: 412px) and (max-device-width: 412px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 6 Landscape */
@media screen and (min-device-width: 732px) and (max-device-width: 732px) and (orientation: landscape) {
/* Styles */
}
/* Google Nexus 7 Portrait */
@media screen and (min-device-width: 600px) and (max-device-width: 600px) and (orientation: portrait) {
/* Styles */
}
/* Google Nexus 7 Landscape */
@media screen and (min-device-width: 960px) and (max-device-width: 960px) and (orientation: landscape) {
/* Styles */
}