Comment améliorer la capacité d'interaction de deux champs de contact ?

Question

Je dois centrer deux champs ("Appelez-nous" et "Notre e-mail") et les rendre réactifs en même temps. Ils doivent être empilés sur de petits écrans. J'ai du CSS en ligne pour les positionner correctement sur les grands écrans, comme indiqué, mais ils ne s'empilent pas comme ils le devraient sur les petits écrans. J'utilise du CSS en ligne car je ne trouve pas le fichier CSS dans lequel insérer le code. Est-il possible d'utiliser du CSS en ligne pour résoudre ce problème ? Si vous le pouvez, voici le CSS en ligne que j'ai qui centre correctement les deux champs sur les grands écrans.

  

≪/pré>
Encore une fois, ce code ne rend pas ces deux champs réactifs, c'est-à-dire empilables sur de petits écrans. Au départ, il y a trois champs. Le troisième champ était "Notre adresse" mais je l'ai supprimé. 
J'ai essayé d'ajouter du CSS en ligne et je m'attendais à ce qu'il soit réactif sur les petits écrans, mais sans succès. 
            

Answer 1

On dirait que vous utilisez le framework Bootstrap. Nom de la classe row应用了display: flex，所以你的内联样式是多余的。你应该使用justify-content-center Le nom de la classe remplace les styles en ligne.

Vous avez :

<div style="justify-content: center; display:flex; class="row">

devrait être :

<div class="row justify-content-center">

Spécifier le même nombre de colonnes sur chaque point d'arrêt est redondant. Utilisez uniquement le nom de classe approprié sur le point d'arrêt sur lequel vous souhaitez que la modification se produise, car elle s'appliquera à tous les points d'arrêt plus grands.

Vous avez :

<div class="col-xl-4 col-xs-4 col-lg-4 col-md-4 col-sm-4 col-12 footer_contact_info">

devrait être :

<div class="col-sm-4 col-12 footer_contact_info">

Comme vous n'avez pas fourni d'exemple reproductible, je ne peux que deviner à quoi ressemble votre structure.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center"> 
    <div class="col-sm-4 col-12 footer_contact_info">Call Us</div>
    <div class="col-sm-4 col-12 footer_contact_info">Our Email</div>
  </div>
</div>