White space to the right of the website on mobile devices

Question

http://cardiffhosp.rapdevs.co.uk/ was created around WooTheme Canvas, which is a responsive design.

I had to disable the viewport meta tag because I don't want the layout to be responsive.

Now it looks much better on mobile devices, but a white area appears on the right side. Mostly seen on iPhone / iPad, but scaling up on other devices shows that there is a gap.

Add the following code, solving my problem, but made the navigation stop working on the iPhone and cause display problems on the Windows 7 phone ...

html, body { overflow-x:hidden; } 

Does anyone have a better solution to remove spaces?

Answer 1

You can try adding width:100% and see if this solves the problem of IE overflow:

 html, body { overflow-x:hidden; width:100%; /* You may also want to try adding:*/ margin: 0; padding: 0; } 

If this still causes problems, you will need to find the element that causes the problem.

A couple of ways to do this. (Be sure to remove overflow-x:hidden; before starting.)

1) Open the inspector, start with sections or elements containing other elements. Set those divs to display:none . If the excess white space disappears, you can find the offending element and fix its CSS.

If this option is too time-consuming or you are unable to do this, you can try another option:

2) This site contains CSS that describes all the elements of your site. This can help you find what causes overflow. CSS used on this site:

 * { background: #000 !important; color: #0f0 !important; outline: solid #f00 1px !important; } 

They also provide a javascript bookmark that also helps with this.