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 {

.logo a img{


#topsupermenu {