htmlcsswordpressmobile-chrome

How to remove right side white space on my wordpress theme on mobile web phone?


I know this is a common bug but haven't been able to find the reason and to fix it with the usual solution of hide x axis overflow.

Can anyone tell me why there is white space to the right on small mobile devices such as pixel and iPhone 4? I haven't been able to replicate this on emulators. The problem occurs on mobile chrome and mobile safari and does not occur on firefox.

The theme I use is static home wordpress with "business page one" theme. Here is the link for the staging website

Any help would be much appreciated i'm not a web programmer just trying to finish my small wp site


Solution

  • Normally this problem is related to the following reasons:

    1. The viewport is not set correctly (make sure that the initial-scale is set to 1.0.)
    2. The body is not 100% for some reason.
    3. There is some element overflowing (for example an image) that is expanding width (make sure that the overflow is hidden, or make sure that anything overflows the body width).

    Try to inspect further with dev tools...