As a newbie in web development and Bootstrap, I'm working on creating a responsive website. Everything was going smoothly until I encountered an issue when transitioning from desktop to mobile view. I have three buttons aligned in a row on desktop, but I want them to be vertically stacked on top of each other in mobile view. The alignment is the problem here. I have attached a photo showcasing the issue along with my HTML and CSS code. Any help or advice would be greatly appreciated! https://i.sstatic.net/gJ2VJ.png
body {
background-color: black;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../Bloc\ Nisipari/View03.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
/* For WebKit*/
-moz-background-size: cover;
/* Mozilla*/
-o-background-size: cover;
/* Opera*/
background-size: cover;
/* Generic*/
}
.container {
color: white;
font-family: 'montserrat';
src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
margin-top: 200px;
}
.img {
width: 500px;
}
.textlogo {
width: 400px;
}
.btn {
--bs-btn-border-color: transparent;
--bs-btn-border-width: none;
}
... (more CSS code here)
@media only screen and (max-width: 900px) {
.container {
color: white;
font-family: 'montserrat';
src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf");
margin-top: 100px;
}
.text-center {
display: block;
text-align: center;
}
}<!doctype html>
<html lang="en>
... (more HTML code here)
</html>