How to enhance the interaction ability of two contact fields?

Question

I need to center two fields ("Call Us" and "Our Email") and make them responsive at the same time. They should be stacked together on small screens. I have inline CSS to position them correctly on large screens as shown, but they don't stack together like they should on small screens. I'm using inline CSS because I can't find the CSS file to put the code in. Is it possible to use inline CSS to fix this? If you can, here's the inline CSS I have that gets the two fields centered correctly on large screens.

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

Again, this code does not make these two fields responsive, i.e. stackable on small screens. Initially there are three fields. The third field was "Our Address" but I removed it.

I tried adding inline CSS and expecting it to be responsive on small screens, but with no success.

Answer 1

Looks like you are using the Bootstrap framework. Class name row has display: flex applied, so your inline style is redundant. You should use the justify-content-center class name instead of inline styles.

You have:

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

should be:

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

Specifying the same number of columns on each breakpoint is redundant. Only use the appropriate class name on the breakpoint you want the change to occur, as it will apply to all larger breakpoints.

You have:

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

should be:

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

Since you didn't provide a reproducible example, I can only guess what your structure looks like.

<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>