I wish to have the colorbox iframe overlay be 65% width on desktop and 95% width on mobile devices.
I am trying to figure out how to do this. I tried this code, but it didn't work. Am I on the right track?
function myFunction(x) {
if (x.matches) { // If media query matches
colorbox.iframe.width = "95%";
} else {
colorbox.iframe.width = "65%";
}
}
var x = window.matchMedia("(max-width: 400px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
I wish to have the colorbox iframe overlay be 65% width on desktop and 95% width on mobile devices.
I am trying to figure out how to do this. I tried this code, but it didn't work. Am I on the right track?
function myFunction(x) { if (x.matches) { // If media query matches colorbox.iframe.width = "95%"; } else { colorbox.iframe.width = "65%"; } } var x = window.matchMedia("(max-width: 400px)") myFunction(x) // Call listener function at run time x.addListener(myFunction) // Attach listener function on state changes