Make two aligned buttons responsive using CSS

January 6, 2023

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…

>Solution :

Since your buttons container is a flexbox container, in your media query you just have to flip the direction like flex-direction: column.

I also better styled your buttons so that they have no more inline style and both the margin-top and the margin-left between buttons is 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;
    justify-content: center;
  }
}

.my-buttons {
  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" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="my-buttons d-flex justify-content-center">

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