I am writing on Bootstrap on a PC, everything is OK, I can’t implement an adaptive. How can I do it?

W

wuddy-good2022-03-29 16:43:16

Bootstrap

wuddy-good, 2022-03-29 16:43:16

Here is a simple layout for the experience
Section issues Join us on Instagram

Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/style.css" />

    <title>Item</title>
  </head>
  <body>
    <main>
      <section class="Our-services">
        <div class="container">
          <h2 class="Our-service-title">Наши услуги</h2>
          <div class="row d-flex justify-content-between">
            <div class="col-md-4 mb-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/01.jpg)"
              >
                <p class="card-text text-center">Загородный дом</p>
              </div>
            </div>
            <div class="col-md-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/03.jpg)"
              >
                <div
                  class="card-body d-flex flex-column justify-content-center align-items-center"
                >
                  <p class="card-text text-center">Квартира</p>
                  <button class="main-btn">Посмотреть</button>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-12">
              <div
                class="card justify-content-center align-items-center"
                style="background-image: url(./img/Our-service/02.jpg)"
              >
                <p class="card-text text-center">Нежилые <br />помещения</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="Join-Instagram">
        <div class="container">
          <h2 class="Join-Instagram-title">
            Присоединяйтесь к нам <br />
            в Instagram
          </h2>
          <div class="row">
            <div class="col">
              <img src="./img/Join-Instagram/01.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/02.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/03.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/04.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/05.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/06.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/07.jpg" />
            </div>
            <div class="col">
              <img src="./img/Join-Instagram/08.jpg" />
            </div>
          </div>
        </div>
        <div
          class="btn-instagram d-flex align-items-center justify-content-center"
        >
          <button class="main-btn">Присоедениться</button>
        </div>
      </section>
    </main>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

body {
font-family: "Open Sans", sans-serif;
}
button {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
.container {
width: 1160px;
padding: 0;
}
.Our-services {
margin-top: 120px;
margin-bottom: 120px;
}
.Our-service-title {
font-weight: 600;
font-size: 46px;
line-height: 63px;
padding-bottom: 60px
}
.card {
width: 360px;
height: 360px;
}
.card-text {
color: #fff;
font-size: 28px;
}
.main-btn {
width: 260px;
height: 60px;
border: none
background-color: #d8b152;
color: #fff;
font-weight: 600
font-size: 18px;
line-height: 25px;
}
.btn-instagram {
margin-top: 50px;
}
.Join-Instagram {
margin-bottom: 140px;
}
.Join-Instagram {
font-weight: 600;
font-size: 46px;
}
.card-instagram {
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

T

TheAndrey7, 2022-03-29
@TheAndrey7

Section issues Follow us on Instagram

Because it's not adaptive. We would pay attention to the classes of the previous sections. coland col-md-4behave completely differently in terms of adaptability due to the "magic" sm suffix
https://getbootstrap.com/docs/5.1/layout/breakpoints/