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
Post a Comment