function mediaQuery(element, value) { let x = document.querySelectorAll(element); x.forEach((item) => { if (window.matchMedia(`(max-width: ${value}px)`).matches) { item.classList.add('mobile'); } else { item.classList.remove('mobile'); } }) return x; } // add class mobile to the element class hero on the screensize 600px mediaQuery(".hero", 600);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter