I've been working on my website, www.ribbonhill.co.uk, and I'm facing an issue with a white space on the right side that only appears on mobile phones.
Interestingly, this problem doesn't show up in full mode on Chrome and Edge browsers. However, when the display is resized to a smaller size, the issue is present on Edge but not on Chrome.
The website was created using Django-oscar and initially didn't have any problems.
I tried removing two CSS files, ribbonhill.css and w3.css, which eliminated the white space. Removing w3.css left only a small space, while removing ribbonhill.css caused a larger gap.
I attempted to eliminate some code snippets without success.
@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;
}
}And
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}Despite these efforts, I haven't been able to resolve the issue.
Update: The white space issue has been resolved on mobile phones and Chrome, but it still persists on Edge / Internet Explorer as shown below. I might just leave it as it ishttps://i.sstatic.net/KQJ3K.png