Using New "Bind to Breakpoint" Feature


I am hoping to add more fine tuning to my responsive design. I have a header and would like to reduce the number of elements displayed in the header as the users’ viewport width decreases. I was able to do that easily with the big breakpoints of tablet and mobile, thanks to WeWeb’s built in tools. Now, I’d like it to be more of a continuous change as the size changes.

I recorded a Loom to illustrate this a little more clearly: Loom | Free Screen & Video Recording Software


Is there a way to dynamically determine if an element should be displayed based on window width?

I know that there are the desktop-table-phone breakpoints, but is there anything that would allow the change to be smooth as someone expands or reduces window size? @Joyce @weweb-team

Hi @kyanaloe :wave:

Not with no-code, no.

This is an edge case that very rarely happens in the real world (users don’t tend to resize their browser windows).

May I ask if there’s something about your use case that leads you to believe users are more likely than average to resize their browser window?

I don’t know if it is very unique to my users, but they may want to look at a document or other file while working in my app, so they may want to make the app smaller on their screen so they can have multiple windows open - especially if they don’t have access to multiple monitors.

Mostly, I have one element in the header that ends up on the page itself in between the tablet and desktop width. I’d really like to clean that up. I’ll see if I can figure out how to do it with code.

Thanks for getting back to me

1 Like

Oooh, super interesting use case!

I’ll investigate more with the team to see if we can find a solution for you.

If the goal is hiding an element at a specific screen width can we just use a media query in a custom css? Someting like @media (max-width: 456px){ .hide-me{display: none !important;}} . It is ugly that !important is required to override the specificity though.
Would this interfere with weweb or can it be used as a workaround?