So, I have this website: https://projeto-jogo-memoria.vercel.app/
I asked some friends to test it and one of them has an iPhone XR. According to the internet iPhone XR’s screen width is 414 pixels.
If I open it on dev tools, it works fine: https://i.imgur.com/NWBND0c.png
But this is how it shows up on the phone: https://i.imgur.com/YVZU2gw.jpg
I noticed the margin between circles is a lot bigger, but I don’t know why this is happening. Could you guys help me?
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="/images/3286079.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<title>Jogo da Memória</title>
</head>
<!--navbar principal-->
<nav class="pse-xs p-3 ps-5 pe-5 navbar navbar-light">
<span style="font-size: 1.2em;" class="pb-1">
<p class="text-darkgray m-0">memory</p>
</span>
<span class="m-0">
<button class="btn-custom btn-restart display-xs me-3 mb-2"
style="font-size: 0.8em; width: calc(60px + 10vw)" type="button" onclick="reiniciarJogo()">
Reiniciar
</button>
<button class="btn-custom btn-playagain display-xs" style="font-size: 0.8em; width: calc(60px + 10vw)"
type="button" onclick="redefinirPreferencias()">
Novo Jogo
</button>
</span>
</nav>
<!--modal que impede cliques quando necessário-->
<div id="impedir_click" class="modal-impedir-click">
</div>
<!--modal das configurações do jogo-->
<div id="modal_iniciar" class="modal-iniciar">
<div class="modal-iniciar-content p-4 p-sm-5 p-md-5 p-lg-5 p-xl-5">
<p style="position: absolute; bottom: 105%; left: calc(50% - 31.5px)" class="text-lightgray text-center">
memory</p>
<form action="" method="POST">
<p class="mb-2 mb-sm-4 text-darkgray">Selecionar Tema</p>
<div class="mb-3 mb-sm-3 mb-md-3 mb-lg-4 mb-xl-4 mb-xxl-5 text-center">
<input class="input-radio btn-check" type="radio" id="temas_1" name="tema" value="1">
<label style="width: 40%;" class="btn-radiobox" for="temas_1">Números</label>
<input class="input-radio btn-check" type="radio" id="temas_2" name="tema" value="2">
<label style="width: 40%;" class="btn-radiobox" for="temas_2">Icones</label>
</div>
<p class="mb-2 mb-sm-4 text-darkgray">Selecionar Quantidade de Jogadores</p>
<div class="mb-3 mb-sm-3 mb-md-3 mb-lg-4 mb-xl-4 mb-xxl-5 text-center">
<input class="input-radio btn-check" type="radio" id="jogadores_1" name="qtd_jogadores" value="1">
<label class="btn-radiobox" for="jogadores_1">1</label>
<input class="input-radio btn-check" type="radio" id="jogadores_2" name="qtd_jogadores" value="2">
<label class="btn-radiobox" for="jogadores_2">2</label>
<input class="input-radio btn-check" type="radio" id="jogadores_3" name="qtd_jogadores" value="3">
<label class="btn-radiobox" for="jogadores_3">3</label>
<input class="input-radio btn-check" type="radio" id="jogadores_4" name="qtd_jogadores" value="4">
<label class="btn-radiobox" for="jogadores_4">4</label>
</div>
<p class="mb-2 mb-sm-4 text-darkgray">Selecionar Tamanho do Tabuleiro</p>
<div class="mb-3 mb-sm-3 mb-md-3 mb-lg-4 mb-xl-4 mb-xxl-5 text-center">
<input class="input-radio btn-check" type="radio" id="tamanho_1" name="tamanho_tabuleiro" value="4">
<label style="width: 40%;" class="btn-radiobox" for="tamanho_1">4x4</label>
<input class="input-radio btn-check" type="radio" id="tamanho_2" name="tamanho_tabuleiro" value="6">
<label style="width: 40%;" class="btn-radiobox" for="tamanho_2">6x6</label>
</div>
<div class="text-center">
<button type="button" onclick="novoJogo()" class="btn-custom btn-start">
Jogar
</button>
</div>
</form>
</div>
</div>
<!--campo dos cartões e jogadores-->
<div class="container">
<!--cartões-->
<div id="tabuleiro" class="row mb-3 mb-sm-4 mb-xl-3 mb-xll-5">
</div>
<!--jogadores-->
<div class="row">
<div id="jogadores" class="players-container mb-2 col-12 ps-4 pe-4">
<div id="jogador_1" class="player-container p-2 p-sm-3">
<p class="m-0 d-inline-block d-md-none">P1</p>
<p class="m-0 d-none d-md-inline-block">Jogador1</p>
<p class="m-0 ms-2 d-inline-block">0</p>
</div>
</div>
</div>
</div>
<!--campo de fim de jogo-->
<div style="display: none; background-color: #ffffff77;" id="modal_vencedor" class="modal-impedir-click">
<div class="modal-iniciar-content modal-fim d-flex justify-content-center p-5">
<div class="modal-fim-content text-center" style="width: 80vw;">
<div class="mb-5">
<span style="font-size: 1.8em;">
<p class="text-darkgray m-0">VENCEDOR</p>
</span>
<span style="font-size: 1.8em;">
<p id="vencedor" class="text-darkgray m-0">NOME</p>
</span>
</div>
<div>
<button class="btn-custom btn-restart d-inline-block mb-2" style="width: calc(100px + 10vw)"
type="button" onclick="reiniciarJogo()">
Reiniciar
</button>
<button class="btn-custom btn-playagain d-inline-block" style="width: calc(100px + 10vw)"
type="button" onclick="redefinirPreferencias()">
Novo Jogo
</button>
</div>
</div>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Luan Peixoto Jardim</a>.
</div>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/script.js"></script>
</body>