make my site responsive

Question

I am working on this site and trying to make the site mobile-responsive.But when I'm trying in responsive mode I see a white space to the right of the screen .I don't know from where its coming from.Can anybody take a look and help me.I have tried adding this to the css

body{
width :100%;
}

but no way its helping. This is my site Please help!! Thanks!!

Answer 1

add/edit your css as accordingly

footer .container {
max-width: 960px;
}

.logo {
background: url(../img/layout/logo1.png) no-repeat;
height: 58px;
max-width: 531px;
display: block;
margin: 45px 10px;
cursor: pointer;
background-size: 100%;
}

@media (max-width: 767px){
   body {
      padding-right: 0px; 
      padding-left: 0px; 
   }
}

Answer 2

It's this section of your CSS:

@media (max-width: 767px) {
    body {
        padding-right: 20px;
        padding-left: 20px;
    }
}

Change the left and right padding to 0. It's in the bootstrap-responsive CSS file though so I'd avoid editing that file and create a rule to override it in your own CSS file.

Answer 3

   @media (max-width: 767px)
    body {
     padding-right: 20px; 
     padding-left: 20px; 
    }

This code is (probably) on line 784 in your bootstrap-responsive.css file and adds the padding on that screen size.

Add in your main.css this:

   @media (max-width: 767px){
      body {
        padding-right: 0px; 
        padding-left: 0px; 
      }
   }

The white space would be gone. You can remove the lines in bootstrap-responsive.css too, but I prefer to do changes in your own files and let plugin files unedited.

Hope this helps!