My Webflow site has unwanted extra space across all devices

Design help General
1

Hi everyone,

I’m experiencing an issue with excessive space on my Webflow site.

The problem is visible across all breakpoints (desktop, tablet, and mobile). There seems to be an empty area I can’t get rid of.

Could someone please help me figure out what’s causing this?

Here is my site Read-Only: Webflow - Copy of Mint Media

2

Hi there,

To help identify and fix unwanted space issues on your site, here’s what you can do:

  1. Enable X-ray mode in Canvas settings to visualize element boundaries and identify overflow areas
  2. Hover your cursor over the extra whitespace while in Designer mode to highlight problematic elements
  3. Review your element width settings - ensure parent elements are set to 100% width and child elements are 100% or less
  4. Check for any interactions that might be causing extra space, as browsers sometimes maintain width requirements for animations
  5. For decorative images, consider using background images instead of inline Image elements to better control spacing

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

i still need help

Here is my site Read-Only: Webflow - Copy of Mint Media

4

Hey @Metric_Maze,

Had a look at the preview site and not sure which excessive space you mean exactly. Could you share screenshot / mention the specific page / section you are facing this issue on?

6

Hi @AJ_Dev

1000085939
10000859392800×1260 152 KB

1000086327
10000863271260×2800 121 KB

These two are screenshots taken while accessing the website on a phone. The first screenshot is in landscape mode, and the second one is in portrait.
If you can preview the site, you’ll notice that in all formats—desktop, tablet, and mobile—there’s extra space on the right side.
I’m not sure how to fix it, so if you could help me, I’d really appreciate it. Thanks!

Here is my site Read-Only: Webflow - Copy of Mint Media

7

Hey @Metric_Maze,

My guess here is the below highlighted element in your ‘Container Default’ is taking up that extra space leading to the horizontal scroll as a result. You could explore fixing its styling / layout structure in a way that it doesn’t go beyond the viewport width.

AJ - Element space
AJ - Element space1850×660 138 KB

It should ideally fix the issue. That being said, if you want an easy fix to ensure that the elements are styled the same way for design purpose but want to get rid of that scrollable extra space, here’s a short tutorial on how to do that and this should solve the issue as well. Hope this helps.

8

Hi @AJ_Dev I finally resolved the problem, thank you very much

1 Like