Question 229629 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make two contact fields responsive

I need to center two fields ("Call Us" and "Our Email") and make them responsive at the same time. They should stack one on top of the other on a small screen. I have inline CSS to position them correctly on a large screen, as is shown in the image, but they don’t stack on top of each other on a small screen like they should. I used inline CSS because I couldn’t find the CSS file to put the code in. Is it possible to use inline CSS to fix this? If so, this is the inline CSS I have that makes the two fields center properly on a large screen.

<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 the two fields responsive, i.e. it doesn’t make them stack on a small screen. Originally there were three fields. The third was "Our Address", but I removed it.

I tried adding inline CSS and was expecting it to be responsive on a small screen but it didn’t work.

Tags:

2

Answers


  1. 0

    It appears that you are using the Bootstrap framework. The class row applies display: flex, so your inline style is redundant. You should also use the justify-content-center class instead of inline styles.

    You have:

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

    Should be:

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

    It is redundant to specify the same number of columns at every breakpoint. Use the appropriate class for only the breakpoints where you want the changes 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 am having to guess what your structure is.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
    Login or Signup to reply.
  2. 0

    add flex-direction:column to the style of your first div and if didn’t work, just remove class="row" from the first div and other classes from second div

    e.g:

    <div style=" display:flex; flex-direction:column; align-items:center"> 
<div>

    and by the way, in the column order, the justify-content doesn’t have any effect, if you want your items be at the center of your page just replace justify-content with align-items as I have done above but if you don’t want it to be at the center just ignore and remove that part.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search