Is there a way of disabling custom code for different breakpoints?

Design help Custom code
1

Hey there,

just a general question regarding custom code: Is there a way to use custom code only for specific breakpoints?

For example: Currently when you update your code in the mobile view, it automatically updates for all breakpoints. Is there a way to add like media queries to custom javascript code for example? How would that look like?

Best,
Jens

2

Hi @jensvahle,

sure, you can add media queries in JavaScript like so:

// 🥑 on DOM loaded
document.addEventListener("DOMContentLoaded", event => {
  let width = window.matchMedia("(max-width: 700px)");
  initCheck(width);
  width.addListener(initCheck);
});

// 🥑 check if the width matches or not
function initCheck(width) {
  if (width.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

quick codepen here.

2 Likes
3

@anthonysalamin Thank you!