How to display specific elements on a page at a specific screen resolution

Question

How to display specific elements on a page at a specific screen resolution. A kind of mobile version for the site, something like media queries, only which will display a certain block of js (react) / html (jsx) code at a certain resolution

Answer 1

You can take a look at the answer on this similar question

If you're using JSX the usage should be wrapped into {} for example:

render() {
    return (
        // ...
        // In my knowledge JS event listeners are more taxing on the performance
        {
            if($(window).width() >= 1024){
                return <div className="bigger-than-1024"> RENDERED CONDITIONALLY </div>
            }
        }
    );
}

The better way to do this might be to still render it and then use CSS classes and media queries to not display it:

@media only screen and (min-width: 1023px) {
    .bigger-than-1024 {
        display: none;
    }
}