title: How do I make my jquery game's gameboard responsive?
body: <p>I'm trying to create a game using Jquery however I have an issue when trying to make the webpage responsive. The issue is that I'm unable to make my game-board <code>"spelplan"</code> responsive, I know the reason this happens is because parts of my script is connected to the "width" of the game-board so when I remove the "width" and replace it with <code>&lt;div id="spelplan" class="col-6 col-m-6"&gt;</code> these parts get completely messed up. So what I need help with is how I make my game-board <code>"spelplan"</code> responsive, I would really appreciate any help I can get with this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function updateClock() {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();
    currentMinutes = (currentMinutes &lt; 10 ? "0" : "") + currentMinutes;
    currentSeconds = (currentSeconds &lt; 10 ? "0" : "") + currentSeconds;
    var timeOfDay = (currentHours &lt; 12) ? "AM" : "PM";
    currentHours = (currentHours &gt; 12) ? currentHours - 12 : currentHours;
    currentHours = (currentHours == 0) ? 12 : currentHours;
    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
    document.getElementById("clock").firstChild.nodeValue = currentTimeString;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    background-color: black;
  }
  
  header {
    position: absolute;
    top: 50px;
    color: white;
    text-align: center;
  }
  
  #clock {
    font-size: 25px;
    position: absolute;
    color: white;
  }
  
  #rand_pos {
    position: absolute;
    top: 20%;
    left: 30%;
    z-index: 10;
  }
  
  .player {
    background-color: red;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 100px;
    left: 100px;
    z-index: 100;
  }
  
  p {
    position: relative;
    left: 10px;
    color: white;
  }
  
  #spelplan {
    position: relative;
    left: 35%;
    top: 200px;
    height: 600px;
    width: 600px;
    background-color: blue;
    border-style: double;
    border-radius: 40px;
  }
  
  .rand {
    background-color: green;
    height: 15px;
    width: 15px;
    position: absolute;
    left: 30%;
    top: 150px;
    z-index: 3;
  }
  
  .new_pos {
    background: #ccc;
    border: 1px solid #000;
    padding: 5px;
    box-shadow: 0 0 20px #555;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
  }
  
  .new_pos:hover {
    background: #bbb;
    box-shadow: 0 0 20px #222;
  }
  
  .new_pos:active {
    box-shadow: 0 0 20px #000;
    background: #aaa;
  }
  
  *:focus {
    outline: none;
  }
  
  .new_pos {
    position: fixed;
    left: 0;
    bottom: 0;
    cursor: pointer;
  }
  
  #footer {
    position: absolute;
    top: 80vh;
    color: white;
    text-align: center;
  }
  
  
  /* For mobile phones: */
  
  [class*="col-"] {
    width: 100%;
  }
  
  @media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m-1 {
      width: 8.33%;
    }
    .col-m-2 {
      width: 16.66%;
    }
    .col-m-3 {
      width: 25%;
    }
    .col-m-4 {
      width: 33.33%;
    }
    .col-m-5 {
      width: 41.66%;
    }
    .col-m-6 {
      width: 50%;
    }
    .col-m-7 {
      width: 58.33%;
    }
    .col-m-8 {
      width: 66.66%;
    }
    .col-m-9 {
      width: 75%;
    }
    .col-m-10 {
      width: 83.33%;
    }
    .col-m-11 {
      width: 91.66%;
    }
    .col-m-12 {
      width: 100%;
    }
    img {
      width: 80%;
      height: auto;
    }
  }
  
  @media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
      width: 8.33%;
    }
    .col-2 {
      width: 16.66%;
    }
    .col-3 {
      width: 25%;
    }
    .col-4 {
      width: 33.33%;
    }
    .col-5 {
      width: 41.66%;
    }
    .col-6 {
      width: 50%;
    }
    .col-7 {
      width: 58.33%;
    }
    .col-8 {
      width: 66.66%;
    }
    .col-9 {
      width: 75%;
    }
    .col-10 {
      width: 83.33%;
    }
    .col-11 {
      width: 91.66%;
    }
    .col-12 {
      width: 100%;
    }
    img {
      width: 100%;
      height: auto;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="style20.css"&gt;
    &lt;script type='text/javascript' src='eventjavascript6.js'&gt;&lt;/script&gt;
    &lt;title&gt;Jquery spel&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $(document).ready(function() {
        var sprites = [];
        var enemies = [];
        var game = $("#spelplan");
        var score = 0;
        var el_score = $("#score")
  
        function SCORE(pts) {
          score += pts
          el_score.text(score);
        }
  
        function RND(min, max) {
          return parseInt(Math.random() * (max - min) + min);
        }
  
        var sprite = function(id, x, y, w, h, _class, view, collisionDetect, options) {
          this.view = view;
          this.id = id
          this.x = x + "px";
          this.y = y + "px";
          this.width = w;
          this.height = h;
          this.options = options;
          this.el = $("&lt;div id='" + this.id + "' class='" + _class + "'&gt;&lt;/div&gt;").css('left', this.x).css('top', this.y);
          view.append(this.el);
  
          this.x = function() {
            return this.el.position().left;
          }
  
          this.y = function() {
            return this.el.position().top;
          }
  
          this.up = function() {
            if (this.y() &gt; 0) {
              this.el.animate({
                top: '-=25px'
              }, 0);
              if (collisionDetect) collisionDetect(this);
            }
          };
  
          this.down = function() {
            if (this.y() &lt; this.view.height() - this.height) {
              this.el.animate({
                top: '+=25px'
              }, 0);
              if (collisionDetect) collisionDetect(this);
            }
          };
  
          this.left = function() {
            if (this.x() &gt; 0) {
  
              this.el.animate({
                left: '-=25px'
              }, 0);
              if (collisionDetect) collisionDetect(this);
            }
          };
  
          this.right = function() {
            if (this.x() + this.width &lt; this.view.width()) {
              this.el.animate({
                left: '+=25px'
              }, 0);
              if (collisionDetect) collisionDetect(this);
            }
            this.destroy = function() {
              this.el.remove();
              for (var i = 0; i &lt; sprites.length; i++) {
                if (data[i].id == this.id) {
                  sprites.splice(i, 1);
                  break;
                }
              }
            }
          };
          this.getPos = function() {
            var pos, width, height;
            pos = this.el.position();
            width = this.el.width();
            height = this.el.height();
            return [
              [pos.left, pos.left + width],
              [pos.top, pos.top + height]
            ];
          };
          this.comparePos = function(p1, p2) {
            var r1, r2;
            r1 = p1[0] &lt; p2[0] ? p1 : p2;
            r2 = p1[0] &lt; p2[0] ? p2 : p1;
            return r1[1] &gt; r2[0] || r1[0] === r2[0];
          };
          this.collidesWith = function(sprite) {
            if (sprite.destroyed === true) return;
  
            var pos1 = this.getPos(),
              pos2 = sprite.getPos();
            return this.comparePos(pos1[0], pos2[0]) &amp;&amp; this.comparePos(pos1[1], pos2[1]);
          };
  
          if (this.options &amp;&amp; this.options.init) this.options.init(this);
          sprites.push(this);
        };
  
        function spawnrand() {
          if (sprites.length &gt; 100) return
          var points = [50, 100, 200, 300, 400, 500];
          var spelplanWidth = game.width();
          var spelplanHeight = game.height();
          var randPosY = Math.floor((Math.random() * spelplanHeight));
          var randPosX = Math.floor((Math.random() * spelplanWidth));
  
          var enemy = new sprite("enemy" + sprites.length + 1, randPosY, randPosX, 15, 15, "rand", game, null, {
            PTS: points[RND(0, 5)],
            init: function(sprite) {
              sprite.selfDestruct = setTimeout(function() {
  
                sprite.el.fadeOut(1000, function() {});
  
              }, 5000);
            }
          });
          enemies.push(enemy);
        }
  
        SCORE(0);
        var player = new sprite("box1", 200, 200, 50, 50, "player", game,
          function(sprite) {
  
            sprites.forEach(function(sprite) {
              if (sprite.id !== "box1" &amp;&amp; player.collidesWith(sprite)) {
  
                sprite.destroyed = true;
                clearTimeout(sprite.selfDestruct);
  
                sprite.el.fadeOut(100, function() {});
                SCORE(sprite.options.PTS);
              }
  
            })
          });
        setInterval(spawnrand, 250);
  
        $(document).keydown(function(e) {
  
          if (e.keyCode == 37) {
            player.left();
          } else if (e.keyCode == 39) {
            player.right();
          } else if (e.keyCode == 38) {
            player.up();
          } else if (e.keyCode == 40) {
            player.down();
          }
        });
      });
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="updateClock(); setInterval('updateClock()', 1000 )"&gt;
    &lt;span id="clock"&gt;&amp;nbsp;&lt;/span&gt;
    &lt;header class="col-12 col-m-12"&gt;
      &lt;h1&gt;Samla så mycket poäng du hinner genom att ta de gröna bollarna innan de försvinner&lt;/h1&gt;
    &lt;/header&gt;
  
    &lt;div id="spelplan" class="col-6 col-m-6"&gt;
      &lt;div&gt;
        &lt;p&gt;Score:&lt;span id="score"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;section id="footer" class="col-12 col-m-12"&gt;
      &lt;h1&gt;Använd piltangenterna för att styra den röda kuben &lt;/h1&gt;
    &lt;/section&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So again what I need help with is making the game-board <code>"spelplan"</code> responsive, any help is appreciated!</p>