Streaming live at 10am (PST)

100vw not being responsive anymore


#1

Hi dear Webflowers,

I have a website which is online for a few weeks and everything was working as I intended to.

I now have a problem with the responsiveness of my navbar. I tried with different browsers in normal and incognito mode but still the same result. (I now also have another website where I am facing the same issue…)

My “navigation” div is set to 100vw. When you load the page everything works fine but if you resize your browser’s window it will no adapt responsively and instead will keep the size of the windows at load time.
If you resize the windows and then refresh the page it will have the new load time size and then, if you expand the window, remain this size… sorry if it is a bit unclear or confusing but basically I intend my navbar to be always 100vw in width.

Some screenshots as well as my read only to further illustrate the issue:

Live website:

Read only:
https://preview.webflow.com/preview/vuparunartiste?utm_source=vuparunartiste&preview=f317c134bf1248b57ccb6c61de33115e

I can’t figure why and I hope somebody can shine some light on this one for me. (perhaps new CSS standards which I or Webflow don’t comply with??)

Thank you in advance.

Max


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Try adding a max-width of 100% to the navigation class and it should work normally.


#3

Hi @bbrazis,

Thanks for your reply, adding max width 100% solved half of the issue and I figured adding 100% min width solved the other half.

However I don’t understand why. Isn’t 100vw or 100% supposed to be a relative unit to make an element responsive? If I were to set a div with a width of 80% shouldn’t it always be 80% of the parent regardless of the parent size or the min and max width?

I thought I got this right but I might misunderstood something.


#4

Just as an addition it seems that I end up with this behaviour when I’m setting the element to display flex.

Anyway thank you for the help as it made me solve the issue but I can’t really find out why and would like to understand the change of behaviour over the past few weeks to avoid unnecessary work around.

Any input would be appreciated.


#5

I don’t know what the actual cause is, but I’ve had this issue pop up before on a non-webflow site. My issue was related to slick.js and after hours of testing I found an online thread that suggested max-width being defined on the parent of the slider. It was probably unrelated, but I tested the max-width bit on your read-only and it worked.


#6

Thank you for this. It could be the way some script are implemented into Webflow source code as you mention slick.js. But for the time you solved my layout issue :slight_smile: