Snippets Collections
 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
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

Wed Apr 05 2023 10:06:58 GMT+0000 (Coordinated Universal Time) https://www.browserstack.com/guide/what-are-css-and-media-query-breakpoints

#css #media #breakpoints
star

Tue Nov 01 2022 04:42:54 GMT+0000 (Coordinated Universal Time)

#media #query #mediaquery
star

Fri Apr 23 2021 11:50:05 GMT+0000 (Coordinated Universal Time)

#media #queries #css

Save snippets that work with our extensions

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