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>