CSS3 Media Queries – iPhone + other mobile devices

It’s a well know fact that people are now browsing websites using their mobile phone, they have access to the internet 24/7. So, the need to have a website looking and functioning on the iPhone or other mobile devices is becoming a necessity. A very simple solution to cater for a smaller screen size is to use CSS3 media queries to target some specific CSS or even a different style sheet altogether.

A simple piece of css3 code to target small screen sizes;

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {CSS Specific code goes here!}

Common and simple solutions to making a site look good on a smaller screen, can be something as simple as changing from a two column layout to one column, adding a smaller background image or removing certain sections of a website.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>