How to enhance the interaction ability of two contact fields?
P粉725827686
2023-08-14 21:20:22
<p>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. </p>
<pre class="brush:html;toolbar:false;"><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">
</pre>
<p>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. </p>
<p>I tried adding inline CSS and expecting it to be responsive on small screens, but with no success. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Looks like you are using the Bootstrap framework. Class name
rowhasdisplay: flexapplied, so your inline style is redundant. You should use thejustify-content-centerclass name instead of inline styles.You have:
should be:
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:
should be:
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>