2 つの接触フィールドの相互作用能力を強化するにはどうすればよいですか?

Question

2 つのフィールド (「お電話」と「メール」) を中央に配置し、同時に応答できるようにする必要があります。小さな画面に重ねて表示する必要があります。図のように大きな画面に正しく配置するためのインライン CSS がありますが、小さな画面では正しくスタックされません。コードを挿入する CSS ファイルが見つからないため、インライン CSS を使用しています。インライン CSS を使用してこれを修正することはできますか?可能であれば、大きな画面上で 2 つのフィールドを正しく中央に配置する、私が持っているインライン CSS を次に示します。

<div style="justify-content: center; display:flex; class="row">
  <div class="col-xl-4col-xs-4col-lg-4col-md-4col-sm-4col-12 footer_contact_info">

繰り返しになりますが、このコードはこれら 2 つのフィールドを応答性にしません。つまり、小さな画面で積み重ねることができます。最初は 3 つのフィールドがあります。 3 番目のフィールドは「Our Address」でしたが、削除しました。

インライン CSS を追加して、小さな画面でも応答することを期待してみましたが、成功しませんでした。

Answer 1

Bootstrap フレームワークを使用しているようです。クラス名 row には display: flex が適用されているため、インライン スタイルは冗長です。インライン スタイルの代わりに justify-content-center クラス名を使用する必要があります。

＃＃＃あなたが持っている：＃＃＃ リーリー

次のようにする必要があります:

リーリー

各ブレークポイントに同じ数の列を指定するのは冗長です。変更を適用するブレークポイントには適切なクラス名のみを使用してください。これは、より大きなすべてのブレークポイントに適用されるためです。
＃＃＃あなたが持っている：＃＃＃ リーリー

次のようにする必要があります:

リーリー

再現可能な例が提供されていないため、構造がどのようなものであるかを推測することしかできません。

リーリー