Make two aligned buttons responsive using CSS

Question

I'm using Bootstrap 4 and CSS to display two aligned buttons as "Guest Page". On displays bigger than 768px the buttons show up fine:

On display smaller than 768px the buttons show up like this :

<div  class="d-flex justify-content-center">
<style>
@media only screen and (max-width: 768px) {
 .dig {
  margin-left: -100px !important;
  width: -400px;
 }

}

</style>
 <a class="home" href="tohome"><button 
  style="height: 200px;
        width: 300px;
        color: rgb(5, 5, 5);
        padding: 20px;

        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    margin-top: 100px;
"
>
<span style="font-size:60px;"><i class="fas fa-home"></i></span><br>
<span style="font-size:25px;">Home</span>
  </button></a>



  <a class="dig" href="todig"><button 
  style="height: 200px;
        width: 300px;
        color: rgb(5, 5, 5);
        padding: 20px;
    
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    margin-top: 100px;
    margin-left: 40px;
"
>
<span style="font-size:60px;"><i class="fas fa-laptop"></i></span><br>
<span style="font-size:25px;">Laptop</span>
  </button></a>


  </div>

I want the buttons to show up one below the other on screens smaller than 768. I tried doing that using the @media code in the style tags above.

I'm not experienced at all in CSS...

Answer 1

Since your buttons container uses the flexbox layout, in your media query you just have to flip the direction as flex-direction: column.

I also better styled your buttons so they no more have the inline style and both thir margin-top and the margin-left between siblings is now handled by the container, especially by using gap as the distance between flex items.

@media only screen and (max-width: 768px) {
  .my-buttons {
    flex-direction: column;
    align-items: center;
  }
}

body{
  padding-bottom: 1em;
}

.my-buttons {
  justify-content: center;
  margin-top: 100px;
  gap: 40px;
}

.my-buttons button {
  height: 200px;
  width: 300px;
  color: rgb(5, 5, 5);
  padding: 20px;
  border-radius: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<div class="my-buttons d-flex">
  <a class="home" href="tohome">
    <button>
      <span style="font-size:60px;"><i class="fas fa-home"></i></span><br>
      <span style="font-size:25px;">Home</span>
    </button>
  </a>
  <a class="dig" href="todig">
    <button style="">
      <span style="font-size:60px;"><i class="fas fa-laptop"></i></span>
      <br>
      <span style="font-size:25px;">Laptop</span>
    </button>
  </a>
</div>

Answer 2

If you use bootstrap changes according to the view point, it can handle by using bootstrap classes. However I will tell you both ways.

• Using @media To change inside elements of a block need to make style changes to outer block of that inside elements. In this problem you need to make the buttons order change, so you need to add styles to outer div.

You can change the direction of elements using flex-direction style. Here I added class name main-box to the div and added felx-direction:column it will change element direction to column, by default it is row.

<style>
    @media only screen and (max-width: 768px) {
    .main-box {
          flex-direction: column;
        }
      }
</style>
<div class="main-box d-flex justify-content-center">
      <a class="home" href="tohome">
        <button
          style="
            height: 200px;
            width: 300px;
            color: rgb(5, 5, 5);
            padding: 20px;

            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-top: 100px;
          "
        >
          <span style="font-size: 60px"><i class="fas fa-home"></i></span><br />
          <span style="font-size: 25px">Home</span>
        </button>
      </a>

      <a class="dig" href="todig">
        <button
          style="
            height: 200px;
            width: 300px;
            color: rgb(5, 5, 5);
            padding: 20px;

            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-top: 100px;
            margin-left: 40px;
          "
        >
          <span style="font-size: 60px"><i class="fas fa-laptop"></i></span>
          <br />
          <span style="font-size: 25px">Digital</span>
        </button>
      </a>
    </div>

• Using bootstrap Simply you can use flex-row or flex-column - flex behavior class to div. If you need to change it according to the view point need to consider about sm,md,lg brake points in bootstrap. In that case you can use flex-md-row and flex-column. If the view point width grater than 768px it will apply flex-md-row or else flex-column.

<div class="d-flex flex-md-row flex-column justify-content-center">
      <a class="home" href="tohome">
        <button
          style="
            height: 200px;
            width: 300px;
            color: rgb(5, 5, 5);
            padding: 20px;

            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-top: 100px;
          "
        >
          <span style="font-size: 60px"><i class="fas fa-home"></i></span><br />
          <span style="font-size: 25px">Home</span>
        </button>
      </a>

      <a class="dig" href="todig">
        <button
          style="
            height: 200px;
            width: 300px;
            color: rgb(5, 5, 5);
            padding: 20px;

            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin-top: 100px;
            margin-left: 40px;
          "
        >
          <span style="font-size: 60px"><i class="fas fa-laptop"></i></span>
          <br />
          <span style="font-size: 25px">Digital</span>
        </button>
      </a>
    </div>

Hope you got the answer!