Different width at different resolution

[dwsiddall]

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