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  >
<style>
@media only screen and (max-width: 768px) {
 .dig {
  margin-left: -100px !important;
  width: -400px;
 }

}

</style>
 <a  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 ></i></span><br>
<span style="font-size:25px;">Home</span>
  </button></a>



  <a  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 ></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...

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<div >

  <a  href="tohome">
    <button>
      <span style="font-size:60px;"><i ></i></span><br>
      <span style="font-size:25px;">Home</span>
    </button>
  </a>

  <a  href="todig">
    <button style="">
      <span style="font-size:60px;"><i ></i></span>
      <br>
      <span style="font-size:25px;">Laptop</span>
    </button>
  </a>

</div>

CodePudding user response：

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 >
      <a  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 ></i></span><br />
          <span style="font-size: 25px">Home</span>
        </button>
      </a>

      <a  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 ></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 >
      <a  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 ></i></span><br />
          <span style="font-size: 25px">Home</span>
        </button>
      </a>

      <a  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 ></i></span>
          <br />
          <span style="font-size: 25px">Digital</span>
        </button>
      </a>
    </div>

Hope you got the answer!