Home / Questions / 378977
Accepted
Efrain Mejias C
Asked: 2020-08-02 08:52:09 +0800 CST 2020-08-02 08:52:09 +0800 CST

How to make Responsive Tag <div> that shows buttons inline?

  • 772

How can I make this split that shows three buttons inline responsive (without using bootstrap)?

The problem is that when changing the screen resolution the buttons are not aligned

HTML code:

  <div aling="center" style="width:100%;">
        <div class="row" aling="center" style="display:inline;text-align:center; margin-left:25%">
            <button class="mainForm__total2" type="button" id="startWebCheckout2" tabindex="7"><b>Pagar con  Paypal</b></button>
            <button class="mainForm__total2" type="button" id="startWebCheckout" tabindex="8"><b>Pagar con otro medio de pago</b></button>
            <button class="mainForm__total2" type="button" id="startWebCheckout3" tabindex="9"><b>Pagar con  Pse</b></button>
        </div>
    </div>

CSS:

.mainForm__total2 {
    width: auto;
    background: #00BEFF;
    border: 1px solid #00BEFF;
    border-radius: 5px;
    color: #fff;
    margin: 30px auto;
    padding: 10px 20px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    transition: .3s;
    display: inline;
}

    .mainForm__total2:hover {
        background: #fff;
        color: #00BEFF
    }

enter image description here

html

1 Answers

  1. Best Answer

    It occurs to me in this edition, as follows:

    Part 1

    • To divthe container we give adisplay: flex;
    • To distribute the 3 buttons centrally, we give ajustify-content: space-around;
      • If you need the buttons not to be glued to the edge of the container, you can give this same label to have a paddingwith the same value for all 4 sides .

    Part 2

    Now to get 2 buttons on the same row and the third one moves to the next one and stays centered, we can do:

    • We create a media query with a maximum interval of 768px and a minimum of 600px ( this will clearly depend on how you are laying out ) for:
      • Use flex-wrapso that when one of the elements of the parent does not enter the same row, then it moves to the next
      • We give the containers of each button a defined width and an alignment

    Part 3

    Now for the last arrangement where the 3 buttons will be stacked on top of each other and centered, we can do this:

    • We set a maximum measure in the media query
    • We now use flex-direction: column;so that the distribution of the elements is from top to bottom

        <style>
      .botonera-lista {
        border: 1px solid;
        display: flex;
        justify-content: space-around;
      }
      
      @media screen and (max-width: 768px) and (min-width: 600px) {
        .botonera-lista {
          flex-wrap: wrap;
        }
        .botonera-lista--forma {
          text-align: center;
          width: 50%;
        }
      }
      
      @media screen and (max-width: 599px) {
        .botonera-lista {
          flex-direction: column;
          align-items: center;
        }
        .botonera-lista--forma {
          margin: 10px 0 10px 0;
        }
      }
    </style>
    
    <section class="botonera-lista">
      <div class="botonera-lista--forma">
        <button class="botonera-lista--forma__boton">
          Forma pago 1
        </button>
      </div>
      <div class="botonera-lista--forma">
        <button class="botonera-lista--forma__boton">
          Forma pago 2
        </button>
      </div>
      <div class="botonera-lista--forma">
        <button class="botonera-lista--forma__boton">
          Forma pago 3
        </button>
      </div>
    </section>

    With an output like this:

    Image 1:

    enter image description here

    Image 2:

    enter image description here

    Image 3:

    enter image description here

    • 2