html - Whitespace to right when I check website on my galaxy s4 -


i can't seem rid of whitespace right of content when view on galaxy s4. ok when minimize browser. suggestions?

also, mailing address icon, email, , phone icons don't line-up in center exactly.

http://www.henschen.com/sitetemplates/2014-16/

  @media handheld, screen , (max-width: 767px) {  body { width: 100%;    height: 100%;     overflow-x: hidden;   }   .grid {     display:inline-block; text-align:center;  }     .grid-pad {    background-color: transparent;        display:inline-block;     text-align:center;        }               .gridcontent {         background-color: #fff;             }   .wrap {     width: 100%;       height: 100%;       overflow-x: hidden;       }   .grid-padcontent {  display: block;        }       .gridcontent {   display: block;        }     [class*='col-'] {     width: auto;     float: none;     margin-left: 0px;     margin-right: 0px;     margin-top: 10px;     margin-bottom: 10px;     padding-left: 20px;     padding-right: 20px; }  .logocol-3-12 { width: 45%;  text-align:center; padding-bottom:1px;      }       #header {     background:#232323;    }     #wrapfooter {       text-align:center;     background:#ec3515;     color:#fedfe0;     font-family:arial,helvetica,sans-serif;     font-size:12px;     }   #footer {      background:#ec3515;     color:#fedfe0;     font-family:arial,helvetica,sans-serif;     font-size:12px;      align-content:center; }       .col-1-1 { left: 0;       right: 0;      display:inline-block; position:absolute; background-color: #fff; font-family:arial,helvetica,sans-serif; font-size:15px; background-color: #ece2bb;        }         .col-1-3left  { width: 55%; margin-top:270px; background-color: #fff; font-family:helvetica,arial,sans-serif; font-size:16px; font-weight:bold; float:none; align-content:center;        }     .col-1-3middle  { width:55%; background-color: #fff; font-family:helvetica,arial,sans-serif; font-size:16px; font-weight:bold; float:none; align-content:center;        }      .col-1-3right  { width:55%; background-color: #fff; font-family:helvetica,arial,sans-serif; font-size:16px; font-weight:bold; float:none; align-content:center;     }              } 

i had similar problem created. within media query create id called container. create overflow of hidden, height , width @ 100% wrap of html content within this. eliminates problem straight away.

 @media handheld, screen , (max-width: 767px) {  body { width: 100%; height: 100%; overflow-x: hidden; } #container{ width:100%; height:100%; overflow-x:hidden; } } 

typically styling body didnt work me!

i hope helps!


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -