Snippets Collections
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);
@media (max-width: 960px) {
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  .container {
    width: 300px;
  }
}
star

Tue Nov 01 2022 04:42:54 GMT+0000 (UTC)

#media #query #mediaquery
star

Fri Apr 23 2021 11:50:05 GMT+0000 (UTC)

#media #queries #css

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension