bootstrap align when resolution < 900px;-CodePudding

I am trying to make a responsive website with the help of Bootstrap, everything good for untill I have 3 buttons on desktop who are in a row and when I want to go to mobile resolution I want them to be verticaly aligned one on the top of eachother ( this work but the problem is the aligment ) i attached a photo with the problem and my html and css code, please be kind I am new in bootstrap and webdev :)

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

.btn-1 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-1:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-1:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 150%;
  right: 150%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-1:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
}

.btn-2 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-2:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-2:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 150%;
  right: 150%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-2:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: -1;
}

.btn-3 {
  width: 200px;
  height: 60px;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 32px;
  transition: ease-out 0.3s;
  background-color: transparent;
  outline: none;
  position: relative;
  z-index: 1;
  font-family: 'montserrat';
  src: url("../Montserrat/Montserrat-Italic-VariableFont_wght.ttf")
}

.btn-3:hover {
  color: rgb(0, 0, 0);
  cursor: pointer;
  text-decoration: none;
}

.btn-3:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #ffffff;
}

.btn-3:hover::before {
  transition: 0.5 all ease;
  left: 0;
  right: -15%;
  opacity: 1;
  z-index: -1;
}

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Home- Studio Art Construct</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  <link rel="stylesheet" href="prehomepage.css">
</head>
<div >
  <img src="../site bootstrap/image/logo.png" >
  <div > "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."

  </div>
</div>

<div >

  <button type="button" >constructii </button>
  <button type="button" >proiecte</button>
  <button type="button" >infrastructura</button>

</div>





<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

Solved. The problem was that in .css I declared the width of the logo as 500px ( which was higher than a mobile phone size) I declare it as percentage so , it will take always 70% (in my case) of the screen and other things aligned themself.

Hope it will help someone else!

CodePudding user response：

If I correctly undestand your problem here is my solution. Your buttons not aligned to the center, because of your with class textLogo. It staticly has width parametr of 400px. Try to give new value in @media or try clamp() fuction on width

styles.css

.textLogo{
   width: clamp(33%, 400px, 88%)
}

Clamp() will set width 33%, if screen is to big, 400px if 400px> 33%, and 88% if it can't fit properly. Use your values and experiment. Good luck