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?
EDIT ------ I noticed when the game is complete every (when every face is flipped) the margin works fine. On my code every button has an anchor tag like this:
<a id="card_${j}" class="card-round-container${(vals.includes(j) ? '' : ' ms-2' )} d-inline-block" onclick="proximoRound('#card_${j}')">
<div class="card-round-back card-round-${tamanho_tabuleiro}x" onclick="">
<i style="font-weight: bold;" class="d-none card-round-${tamanho_tabuleiro}x-icon fa-responsive-size-${tamanho_tabuleiro}x">${tabuleiro[j]}</i>
</div>
</a>
When two cards with the same icon are flipped, I set type="" and onclick="" properties on the anchor and it seems to works fine. Maybe the bug is coming from the type="button" on the anchor? EDIT -------
EDIT²:
This code is an example of the container, a row and a card.
<div class="container">
<div id="tabuleiro" class="row mb-3 mb-sm-4 mb-xl-3 mb-xll-5">
<div class="mb-2 text-center col-12">
<a id="card_0" class="card-round-container d-inline-block" type="button" onclick="proximoRound('#card_0')">
<div class="card-round-back card-round-4x" onclick>
<i style="font-weight: bold;" class="d-none card-round-4x-icon fa-responsive-size-4x">2</i>
</div>
</a>
</div>
</div>
</div>
SOLUTION: I removed type="button" from the anchor tag and the unecessary margin/padding seems to be removed. This seems to be some kind of problem with safari browser only. Does anyone know why it happened?
according to internet iphone XR screensize is 828x1792 pixels and according to browser inspect tool the screensize of iphone XR is 414x896 pixels and you r design changes below 260px you need to do some css based on the media quesries .
You need to change the height and width of .card-round-4x if goes to below 260px
Just change
@media (min-width: 0px)
.card-round-4x {
width: 40px;
height: 40px;
}