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


#1

Hi, I am trying the steps for a responsive blog using steps at mybloggertricks.com/2015/08/design-responsive-blogspot-header.html

I have completed the prior steps on a brand new test blog with no other customization. See it here test-responsive-blog.blogspot.com/?m=1

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?


#2

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;
  float:left;
}  
  .content {
padding:0px;
width:98.8%!important;
}
  .column-right-outer{width:100%!important; float:left;}
.footer-outer{width:100%!important;}
#Header1{width:100%!important;}
  @media only screen and (max-width:650px) {
  .content {
max-width:97.5%!important;
}
@media only screen and (max-width:550px){
 .content {
max-width:96%!important; 
}
      @media only screen and (max-width:420px){
 .content {
max-width:92%!important; 
}
        @media only screen and (max-width:320px){
 .content {
max-width:90%!important; 
}

#3

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 test-responsive-blog.blogspot.com/?m=1