White space showing up on right side of page when background image should extend full length of page [closed]

Answer 1

The problem is in the file :

style.css - line 721

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

remove the lines :

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 

This basically gives a shadow gradient only to the footer. In Firefox, it is the first line that is causing the problem.

Answer 2

I added:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

into your CSS at the very top above the other classes and it seemed to fix your issue.

Your updated .css file is available here

Answer 3

Apparently the (-o-min-device-pixel-ratio: 3/2) is causing problems. On my test site it was causing the right side to be cut off. I found a workaround on github that works for now. Using(-o-min-device-pixel-ratio: ~"3/2") seems to work fine.

Answer 4

After exploring some of the helpful strategies provided here, I found that I only needed to add iOS specific CSS (I put it at the bottom of my main css sheet.) Seems like hiding the overflow-x was the answer for me. I assume that stating the width at 100% helps in the event that my content goes wide. It should be noted that I was only having this issue in iOS. If it is also in Firefox, just the html and body block should probably be used as the @media is specifically targeting mobile devices.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

Please hip me if this seems incorrect to anyone :)

Answer 5

This is a pretty old question, but I thought I'd add my 2 cents. I've tried the above solutions, including the ghost css, which I will definitely be saving for future use. But none of these worked in my situation. Here's how I fixed my issue. Hopefully this will help someone else.

Open inspector (or whatever your preference) and starting with the first div in body tag, add display: none; to just that element. If the scroll bar disappears, you know that element contains the element that's causing the issue. Then, remove the first css rule and go down one level into the containing element. Add the css to that div, and if the scroll bar goes away, you know that element is either causing, or containing the offending element. If adding the CSS does nothing, you know it was not that div that caused the issue, and either another div in the container is causing it, or the container itself is causing it.

This may be too time consuming for some. Lucky for me, my issue was in the header, but I can imagine this taking a bit of time if your issue was say, in the footer or something.

Answer 6

overflow-x: hidden; works perfect for me.