CSS Styling for Mobile Devices Responsive Design

Include meta tag in head to tell mobile devices to use device width instead of assuming desktop width and scrolling:

For iPhone:

@media only screen and (min-device-width: 480px)
{
#background img {
display: none;
}
}

Other screen sizes can be targeted as follows:

min-width: 320px // smartphones, portrait iPhone, portrait 480x320 phones (Android)
min-width: 480px // smartphones, Android phones, landscape iPhone
min-width: 600px // portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
min-width: 801px // tablet, landscape iPad, lo-res laptops ands desktops
min-width: 1025px // big landscape tablets, laptops, and desktops
min-width: 1281px // hi-res laptops and desktops

Leave a Comment