How can I make this animation responsive?

Question

Hy, First of all, I'm new at programming and at this site, so please don't attack me :)

So, I've just started a new project (Gambling site with steam login datas) The site contains four "games" (Crash, Dice, Roulete, Trade up). I'm working on roulette at the moment, and I needed to ask for help. I've found a code about this, and I've modified it to work "perfectly". I've looked the page on my mobile, and it didn't work well, after the first spin it went backwards and the animation totally crashed (moved about 3 numbers, and so on..). I tried with css (background-size: cover) , but it messed up with pixels and didn't spin to the correct number. I'd like to, this code calculate the resized page's background-width and scroll it to the perfect number.

Thanks for the help.

Here is the code:

--JS--

    var socket = io.connect("http://94.248.229.179:3000");
    var button = $('.button');
    var items = $('.items');
    var coin_width = 75;
    var numbers = {
      0: 525,
      1: 0,
      2: 150,
      3: 300,
      4: 450,
      5: 675,
      6: 825,
      7: 975,
      8: 1050,
      9: 900,
      10: 750,
      11: 600,
      12: 375,
      13: 225,
      14: 75
    };

        socket.on("roulettenumber", function(data){
      var number = data.roulettenumber;
      var cycles = Math.floor(getRandomArbitrary(2, 8));
      var dev = getRandomArbitrary(0, 72);
      var scroll_amount = ((825 + numbers[number]) + dev) + (1125 * cycles);
      items.removeClass("spin_animation");
      items.css({"background-position-x": "-262.5px"});
      setTimeout(function(){
          items.addClass("spin_animation");
          items.css({"background-position": "-" + scroll_amount + "px"});
        console.log("W: " + number + " SA: " + scroll_amount + " D: " + dev + " C: " + cycles);
      }, 10);
        });

    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }

--CSS--

    .wrapper {
      overflow: hidden;
      width: 600px;
    }

    .items {
      background-image: url("../img/roulette.png");
        position: relative;
        width: 1125px;
        height: 75px;
    }

    .items:before {
        content: "";
        position: absolute;
        background: #ffd02d;
        height: 100%;
        width: 3px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    .spin_animation {
            transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); /* custom */
                transition-duration: 6.79891s;
    }

--HTML--
    <div class="wrapper">
      <button class="button">Spin</button>
      <div class="items"></div>
    </div>

Answer 1

Something looks weird in your css code, the width of the wrapper is bigger than it's child items, you probably need to fix that first.

As of the responsiveness of your page, you only have 2 items which are bigger than the screen width (.wrapper & .items), this media query in the bottom of the css file should do the job:

@media only screen and (max-width : 1024px) {
  .wrapper {
    width: 100%;
  }
  .items {
    width: 100%;
  }
}

Don't forget to add to the head section of your html file this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">