Media queries and height & width defined in variable

Question

I found this plugin online:

https://github.com/frenski/quizy-memorygame

As you can guess, it's a memory game in which you can choose the images to display on the cards. And it's great. But the thing is I'm trying to use media queries to make it more responsive, and it worked great until I realized that the width and height of the cards are defined not only in the CSS but also in a variable.

var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:3, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true }; 
    $('#tutorial-memorygame').quizyMemoryGame(quizyParams);
    $('#restart').click(function(){
      $('#tutorial-memorygame').quizyMemoryGame('restart');
      return false;
    });

How can I change the itemWidth and itemHeight depending on the size of the screen? Is that even possible?

I tried using a function like:

if(screen.width <= 480){
        //change width and height to this
    }else if (screen.width <= 780){
        //change width and height to that
    }else (screen.width <= 960){
        //change width and height to this
    }

But it didn't work...

All ideas are welcome! And thank you for your help.

Answer 1

Using if (screen.width <= 480) might not work onload, try use window.matchMedia() to match your CSS media queries:

  if (window.matchMedia('(max-width: 480px)').matches) {
    //...
  } else {
    //...
  }