Hello,
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
Thanks!
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 
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
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?