Hi community,
There is an error displaying the width of the site and I don’t know how to fix it, I put 100vw to solve the problem but it didn’t help.
Does anyone have any ideas on how to solve this?
Screenshot & read-only link below
Here is my site Read-Only: Webflow - Milana's Stellar Site
Not sure what you are referring to. Which error?
Hey spirelli,
I want to get rid of the black bar that goes beyond the 100VW size and thus makes a bad responsive for the site and thus the background does not capture the whole screen area, leaving such black bars.
Here is a screenshot to get in more details
There are several things you need to adjust.
On Tablet (Breakpoint in Designer is 991px and down) it’s your footer that is causing the problem.
It’s width is higher then the viewport width:
To solve this you could change the flex direction from the footer section to “vertical”
On smaller sections it’s the footer and the experience-section that is causing the issue:
Both are currently not responsive (The width of the elements is wider than that of the viewport). Play around with these a little bit. When they fit the viewport width, you should get rid of the black bar.
Hey Mirko,
Thanks for your reply, I tried to make changes as you said but unfortunately, it doesn’t solve the problem.
I’ve changed the size of the footer and sections above, on devices lower than desktop (tablet, mobile, etc.) but I guess it doesn’t affect the black line directly (as it’s changing for devices lower than 2560px, the monitor I tested on)
Do you have any other suggestions on how to fix the problem or I’ve still made the mistake somewhere? Thanks in advance.
It could be also caused by the navbar, cuz it hasn’t applied position to the body due to a Webflow bug (as I’ve read on the Webflow forum)
I’ve found the solution to this, but now the right side scroll isn’t available, can you help with this instead?
Mhh, maybe I got you wrong. To be honest, I am not sure if I understand what you mean…
I don’t see a black bar on desktop and I see the scrollbar on the right side:
Did you fix it on your own?
If not, maybe it’s a browser issue. Which Browser (and Version) do you use?
Browser I use - Chrome 10.1 (maybe later), the issue was pretty stupid and simple, some of my containers had value - of 100VW, which directly caused the problem so I decided to change the attribute of weight to “100%” and the black line disappeared
