Responsive theme Design

Posted: May 24, 2012 in CSS, Wordpress
Tags: , , , , , , , ,

Build a responsive WordPress theme from your existing WordPress theme; using CSS3 Media Queries.

A responsive design means a layout that responds well to different screen sizes based on the view-port. Such as iPad, tablets, Smart Phones and Desktop. This tutorial explains how to make responsive theme from your existing wordpress theme css.

What you should already know:
1. How to build a wordpress theme
2. CSS knowledge

To make the theme responsive using CSS media query you have to use the css link tag media attribute value as “screen”.

Please check below example

<link rel="stylesheet" href="{Your css URl}" type="text/css" media="screen" />


and also use the view-port meta tag

<meta name="viewport" content="width=device-width">
 


And then use the media queries in your css

 
/* iPad Portrait */

@media only screen and (max-width: 768px) {
 Your Style here
}

/* iPad Landscape */

@media only screen and (max-width: 1024px) {
Your Style here
}
@media only screen and (max-width: 940px) {
Your Style here
}

/*layouts smaller than 600px, iPhone and mobiles*/
@media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)  {
Your Style here
}

/* iPhone Landscape */
@media screen and (max-width: 480px) and (orientation: landscape) {
Your Style here
}

/* iPhone Portrait */
@media screen and (max-width: 480px) and (orientation: portrait) {
Your Style here
}
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s