Hello devs! I have a container that I don’t want to be rendered for screens smaller than 992px width. How do I do this using conditional rendering? Thx in advance 
Is this a specific viewport size like mobile? You could hide it via responsive settings. Otherwise you either have to use custom css, or a javascript function to check the viewport width. I’d go with css, but I think it won’t reflect in the editor (only upon you publish your project).
1 Like
I know I could just use display: none; , if that’s what you’re saying, but I thought that it would be possible to use conditional rendering for increased performance. And yea, I don’t want the container to show on tablet and phone, only on desktop
window.addEventListener('resize', ()=>{
return window.innerWidth});
You can listen to Window resize like this. with window.innerWidth, if you want to get the value only once on load, you might do only return window.innerWidth in a custom JS Bind. If you want to listen to resized tho, u gotta add the before mentioned event listener.
Then you just add a condition whether it is > or < than the value u wish to check for and it will give you a boolean (true/false)
1 Like
I don’t know how trustworthy this is; I have not tested it on a production site. But WeWeb surfaces browser info for you:
1 Like
This breakpoint is available and working, but we do not push responsive on this property (conditional rendering) because we still have issue when you have prerendering available.
1 Like