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
}
