Responsive Web Development 101 – How to modify your theme to adapt to different screen sizes?

/, Wordpress 101 Guide/Responsive Web Development 101 – How to modify your theme to adapt to different screen sizes?

Responsive Web Development 101 – How to modify your theme to adapt to different screen sizes?

With the arrival of responsive design, many themes and frameworks now offer responsiveness and adapt to their respective screen size.  You can achieve the same results if you use a framework like twitter bootstrap.

But what if your do not use a framework and would like to make your WordPress theme responsive? The solution resides in CSS3 Media Queries.

Media Queries help us select a specific size screen. By using a (min-width: 768px) and (max-width: 960px), you can proceed to modify the selectors into the size the preferred size for each screen after testing.

Test this approach next time you have a project that needs responsiveness.

@media only screen and (min-width: 768px) and (max-width: 960px)
#boxed_wrapper { width: 766px; }
#option_btn { display: none; }
.social_wrapper { width: 350px; }
#wrapper { width: 766px; }
#top_bar { width: 766px; }
.tagline { width: 706px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {

#boxed_wrapper { width: 318px; margin-top: -20px; }
#option_btn { display: none; }
.social_wrapper { width: 318px; }
#header_wrapper { height: 40px; }
#top_menu { margin-top: 15px; }
#top_menu li { font-size: 11px; margin-right: 10px; }
#header_wrapper .social_wrapper { display: none; }
}

@media only screen and (max-width: 500px) {
.logo {
text-align: center;
float: none;
margin: 0;
padding-top: 40px;
}

#menu_border_wrapper select {
height:40px;

}
.logo a img{
width:318px;

}

#topsupermenu {
display:none;

}
}

By | 2013-07-13T20:52:58+00:00 July 13th, 2013|Categories: CSS3, Wordpress 101 Guide|0 Comments

About the Author:

Leave A Comment