Need help!! I keep running into the same problem: in mobile portrait mode, the site’s content area is smaller than the viewport width, and two white bars appear on the sides of the site. These bars are actually the body’s background — it’s like when I create a section or div block inside the body, they don’t stretch to fill the entire width. It’s as if the body has padding, but it doesn’t. No matter what I try, nothing works. I made a very simple website to test this issue, and I’ll share the link here. The strange thing is that it doesn’t matter what structure or order I use — all two or three websites I’ve built have had the same problem. Can anyone help me with this issue?
1 Like
Hi there,
Unwanted horizontal scrolling and whitespace in your project typically occurs due to overflow issues. You can identify the source by enabling X-ray mode in Canvas settings to visualize element boundaries. Another helpful technique is to hover your cursor over the extra whitespace on the right side while in Designer mode - this will highlight the problematic elements.
For the best results, ensure your parent elements are set to 100% width, with child elements at 100% or less. It’s also important to verify your site’s responsive behavior by testing different viewport widths - you can do this by clicking and dragging the edge of the canvas across various breakpoints.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
1 Like
Thank you for your response, but the issue is that these white bars are not visible inside the designer mode, they only appear after publishing the site. Another thing is that the test site I built for this issue only has two div blocks, with no other elements that could cause an overflow problem. I also tried the method you suggested and set both the parent width and the child element to 100%, but it didn’t help. I’m sharing the preview link and the live site here so you can check. Thanks!
ps : I couldn’t find the X-ray mode either!
1 Like
Hey @Sahar_Delasaei ,
Are you still facing this issue? The site you shared seems to take up the width of the mobile screen in portrait and landscape mode and there are not white borders.
1 Like
Hey @AJ_Dev,
Yes, I do still have the problem and I don’t know what to do with it! Do you have any solution?
1 Like
Hey @Sahar_Delasaei ,
It seems like it’s a known issue when iPhone (with Safari) is rotated to landscape mode, since I use Android, your site shows up perfectly on portait and landscape on my end.
There are few solutions / workarounds that I could find to solve this for iPhone Safari and one of those which seemed to work for people was to add the following inside the Head code of your site settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
You can find more workarounds in this article as well and you can test what approach works best for your site.
Hope this gives you some idea.
1 Like