I am building this website http://104.236.64.172:8081 using Bulma CSS framework (probably irrelevant). The site is responsive and overall looks great on mobile devices except for one small problem that I am unable to fix.
If you open this link on your mobile phone you'll see that there is some unwanted horizontal space on the right side. Kind of like some spare margin-right
. But the problem is I can't debug this on my desktop because it doesn't seem to appear on large screens with small widths. Can you help me debug this?
I was able to resolve the issue by hiding the overflow-x on the cont class.
For example:
.cont {
max-width: 1110px;
margin: 0 auto;
overflow-x: hidden; /* THIS */
}
I tried adding this same implementation on cont's children classes, but it did not seem to resolve the issue the way that it did with it's parent. If someone has a better (or safer) resolution, feel free to use that instead of this as this may prove to create unwanted effects later on.
Also just as a tip, you should be able to use a web browser's (in my case Chrome) inspect feature in order to reproduce using a site on a mobile device. Here's a quick walkthrough.