CSS
@media screen and (max-width: 1100px) { .main-wrapper{ margin: 0 !important; width:100%; min-height: 0px; } .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; padding: 0; width:auto; background: none; } .sidebar-wrapper .widget { border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 960px) { #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } .main-nav-main ul { text-align: center; } .main-nav-main li { float: none; } .footer-bottom .attribution{ text-align: center; } } @media screen and (max-width: 850px){ #header h1, #header h1 a { font-size: 50px; line-height: 350%; } .page-header .inner .ct-wrapper { padding: 0 48px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } .main-nav-main { border-bottom: 0; } .home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 { padding: 20px 0; width: 50%; } .outer-wrapper { padding: 0; } #content { padding: 5px; clear: both; } #comment-editor { margin:10px; } } @media screen and (max-width: 500px){ #header img { width:100%; } #header h1, #header h1 a { font-size: 28px; } .page-header .inner .ct-wrapper { padding: 0 10px; } .home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 { padding: 20px 0; width: 100%; } .post-outer { width: 100% !important; } } @media screen and (max-width: 420px){ .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .comments .comments-content .comment-replies { margin-left: 0; } }Responsive on ?
The device's below, tested 100% responsive.- iPhone 3+4
- iPhone 5
- Crappy Android
- Android (Samsung Galaxy)
- iPad
- Kindle
Still confused ?
Check It