-3

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

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
sivi
  • 10,654
  • 2
  • 52
  • 51
  • Please go read https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it – CBroe Aug 07 '20 at 09:00
  • I see your point. I thought to make the questions more general and decided against it because was afraid no one would answer. However I do see your point. It happens to me personally that when I'm working on a new subject i'm very perplexed so that's not usual. for me a community of helpers before rules. some ppl need more rules. I try to contribute. cheers for that point of view it's legit i'm just annoyed by not being able to find the prob – sivi Aug 07 '20 at 09:15

2 Answers2

1

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...

Nil Suria
  • 474
  • 4
  • 15
  • 1
    Try to change the code in line 386 (body style) of your css style file for this: body { color: #59595b; font: 17px/26px 'Source Sans Pro', sans-serif; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; overflow-x: hidden; width: 100%; position: relative; } – Nil Suria Aug 07 '20 at 12:36
  • It's works on emulator will check now on theme – sivi Aug 07 '20 at 12:52
0
.site {
    max-width: 100% !important;
}
.site-header {
    max-width: 100% !important;

}
#site-header img {
    width: 100% !important;

}

Add this css in Appearance -> Customize -> Additional CSS

let me know if this solves your problem.

Usman Mahmood
  • 69
  • 1
  • 5