Responsive Blog using steps on this site, html width not adjusting


Hi, I am trying the steps for a responsive blog using steps at

I have completed the prior steps on a brand new test blog with no other customization. See it here

The problem I am facing is that when viewed on mobile screen, the width still remains to be 960px. I tried various things below, but none of them work /-----iPads, Tablets ZONE4 ----------/ @media only screen and (max-width:768px) { #region-inner { width: 100% !important; min-width: 0!important; } #content-outer { width: 100% !important; } #content-fauxcolumn-inner { width: 100% !important; } #header-inner { width: 100% !important; } #header {overflow:hidden!important;width:100%!important;} }

On viewing the page on a mobile screen of size 414 x 736 inspecting the page I see this CSS - .content-outer, .content-fauxcolumn-outer, .region-inner { min-width: 960px; max-width: 960px; _width: 960px; }

What need to be done to make the width auto adjust to the screen size?


Hi @RvP

Remove all the code which you have done before and use this. :slight_smile:

@media only screen and (max-width:768px) {
.main-inner .section {
width: 92%!important;
  .content {
  .column-right-outer{width:100%!important; float:left;}
  @media only screen and (max-width:650px) {
  .content {
@media only screen and (max-width:550px){
 .content {
      @media only screen and (max-width:420px){
 .content {
        @media only screen and (max-width:320px){
 .content {


thanks @Param35 I removed all earlier media code and added the one you mentioned. Still I see the width not adjusting to mobile screen. I do see the side bar wrapped to row below the blog posts, which is great