items can't be in the center, for mobile emulator but in desktop and devtools, it works well, nuxt3,tailwind

Question

i use nuxt3 and tailwind , the problem that it works well in my computer and when i make the browser for mobile from devtools but the problem when i open my website from my own phone, i found that all of things don't take items-center which with tailwind is working well on any computer or tablets , and also css style : align-items:center; so how can i fix this problem , this is the first time to face a problem like that , and if i test my responsive in computer, every thing will be correct , so why it shown in phones like this, is this error from configuration of nuxt or what? why style of align-items or making things in the center don't apply in phones emulators,

---

main problem:

for this code: <button class="button"> {{ $t("SIGN_UP.CREATE_ACCOUNT.TEXT_12") }} </button>

.button { background: red; }

difference in mobile and computer: difference in mobile and computer

other components:

this is one of my components:
this is code of this line :
warning line component in computer
warning line component in mobile emulator

<template>
  <div class="flex items-center gap-1 self-start">
    <small class="error-mark" :class="error ? '' : 'correct-mark'">!</small>
    <small :class="error ? 'thatek-orange-dark' : 'thatek-green'">{{ message }}</small>
  </div>
</template>

<script setup>
defineProps(["error", "message"]);
</script>

<style lang="scss" scoped>
@import "@/assets/scss/variables";
.error-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $thatek_orange_very_light;
  background: $thatek_orange;
  width: 15px;
  height: 15px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
}
.correct-mark {
  background: $thatek_green;
}
</style>

**and this another code for this box: **
email box in computer
email box in my phone
and this is its code:

<template>
  <nuxt-link :to="goToContactSection" class="flex items-center gap-2 justify-center service-box p-2 rounded-lg" :class="{ 'flex-row-reverse': !rightToLeft }">
    <p class="font-bold">[email protected]</p>
    <img src="@/assets/images/envelope-green.svg" alt="envelope logo" />
  </nuxt-link>
</template>
<style lang="scss" scoped>
@import "@/assets/scss/variables";
.service-box {
  background: $thatek_grey_light;
  border: 1px solid $thatek_grey_medium;
}
</style>

i use this module "nuxt-purgecss", and i think it from that but i remove it and no thing happen, the only solution which work but it isn't suitable for all of my code: that i make padding top with value larger than padding bottom, but this solution will not be for all of my components that there are components that take only flex and items-center and justify-center.

Answer 1

finally i found the problem from the font type that i use, which is Tajwal, when i change it to other font, every thing work well.