Estoy tratando de implementar CSGO como código de apertura de casos en mi sitio web. El código se puede encontrar aquí: https://codepen.io/killerek/pen/ObBOJE
Estoy tratando de que responda en todas las pantallas (ancho completo y centrado), pero cuando cambio el tamaño de la ventana o la abro en un dispositivo móvil, la flecha roja no está en el centro. Después de cambiar el CSS de la clase de flecha hacia abajo a margin-left:50%; y después de centrar la clase cardList con ancho de pantalla completo: "width: 100%; margin: auto;" surgen 2 problemas:
Después de cambiar el tamaño de la ventana, la flecha roja siempre está centrada (comportamiento correcto) pero los elementos de la lista de tarjetas no se mueven (incluso si la flecha apunta al elemento ganado, la flecha se mueve, pero no el elemento)
Ahora la flecha no apunta al elemento correcto, tiene algo que ver con este código:
$('.card').first().animate({ marginLeft: -rand }, 5000, tiempo, función(){ ... }
El giro está animado en función de la recompensa aleatoria generada, pero no sé qué valor poner allí para que funcione. Supongo que el marginLeft debería cambiarse en valores de %.
Me gustaría pedir ayuda en este asunto.