Когда я минимизирую экран браузера, два раздела на моем веб-сайте пересекаются (Услуги и функции) - PullRequest
Новая
       11

Когда я минимизирую экран браузера, два раздела на моем веб-сайте пересекаются (Услуги и функции)

0 голосов
/ 11 января 2020

Я создал эту веб-страницу, используя html, CSS и bootstrap, на большом и среднем экране все в порядке, но когда я уменьшаю изображение до небольшого экрана (col-12 и col-sm-12), разделы функций и услуг смешались, я перепробовал все, что я не знаю, как это исправить.

вот код, надеюсь, вам, ребята, это понятно: 

    * {
      padding: 0;
      margin: 0;
      font-family: "Lucida Fax", sans-serif;
    }

    body {
      overflow-x: hidden;
    }

    .header .content-box {
      background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(img/Webz.jpeg);
      background-position: center;
      background-size: cover;
      width: 100%;
      height: 100vh;
    }

    .menu {
      display: inline-flex;
    }

    .menu button {
      width: 75px;
      height: 35px;
    }

    .menu img {
      width: 147px;
      height: 147px;
      cursor: pointer;
      margin-top: 1px;
    }

    .menu button {
      background: #ff4d73;
      font-size: 16px;
      color: #fff;
      border: 0;
      position: absolute;
      right: 70px;
      top: 40px;
      cursor: pointer;
    }

    .menu button .fa {
      margin-right: 7px;
    }

    .banner-text {
      color: whitesmoke;
      margin: 14%;
      text-align: center;
    }

    .banner-text h2 {
      font-size: 37px;
    }

    .banner-text p {
      font-size: 15px;
      margin: 25px;
    }

    .banner-text a {
      border: 1px solid #ff4d73;
      padding: 7px;
      color: white;
      text-decoration: none;
      display: block;
      width: 100px;
      margin: auto;
      background: #ff4d73;
      transition: .70s;
    }

    .banner-text a:hover {
      background: transparent;
    }

    .service .content-box {
      background: whitesmoke;
      width: 100%;
      height: 100vh;
    }

    h1 {
      text-align: center;
      padding-top: 100px;
    }

    .service h1::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 190px;
      margin: 21px auto 50px;
    }

    .services .icon {
      font-size: 37px;
      margin: 21px auto;
      height: 55px;
      width: 55px;
      border: 1px solid #ff4d73;
      border-radius: 50%;
      color: #ff4d73;
    }

    .services p {
      font-size: 12px;
      margin-top: 10px;
      color: #777;
      padding: 20px;
    }

    .services span {
      color: #ff4d73;
    }

    h3 {
      font-size: medium;
    }

    .services .col-md-3:hover {
      background: #ff4d73;
      cursor: pointer;
      color: #fff;
      box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.4);
      transition: 0.5s;
    }

    .services .col-md-3:hover p {
      color: #fff;
    }

    .services .col-md-3:hover span {
      color: #fff;
    }

    .services .col-md-3:hover .icon {
      border: 1px solid #fff;
      color: #fff;
    }

    li {
      padding-left: 35px;
    }

    .features .content-box {
      background: white;
      width: 100%;
      height: 100vh;
    }

    .features h2 {
      margin: 49px;
      padding-top: 111px;
    }

    .features h2::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 150px;
      margin: 13px 7px 51px;
    }

    .features ul {
      margin-left: 5px;
      margin-top: 33px;
      list-style-type: none;
    }

    .features ul li {
      position: relative;
      line-height: 33px;
      font-size: 13px;
    }

    .features ul li::before {
      content: '';
      height: 7px;
      width: 7px;
      background: #ff4d73;
      transform: rotate(45deg);
      margin-right: 19px;
      display: inline-block;
    }

    img {
      height: 57%;
      width: 85%;
      margin-top: 29%;
    }

    .footer .content-box {
      background: whitesmoke;
      width: 100%;
      height: 100vh;
    }

    .footer h1::after {
      content: '';
      background: #ff4d73;
      display: block;
      height: 3px;
      width: 190px;
      margin: 21px auto 50px;
    }

    .form-control {
      margin: 17px;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
    }

     ::placeholder {
      font-size: 12px;
    }

    .contact-form button {
      border: none !important;
      background: #ff4d73 !important;
      box-shadow: none !important;
      border-radius: 0;
      margin-left: 27px;
    }

    .contact-info .follow {
      background-color: #fff;
      padding: 8px;
      margin: 11px;
    }

    .contact-info .fa {
      margin: 10px;
      padding-right: 20px;
      font-size: 20px;
      font-weight: bold;
      color: #ff4d73 !important;
    }

    .copyright {
      text-align: center;
      font-size: 15px;
    }

    .fa-heart-o {
      color: red;
      font-size: 17px;
    }

    .footer hr {
      margin-top: 217px;
      background: #ff4d73;
    }

    .form-group label {
      display: block;
    }

    .features {
      position: relative;
      top: 100%;
    }
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <title>Document</title>
    </head>

    <body>


      <!-- Service Section -->

      <section class="service d-block">
        <div class="content-box">
          <div class="container">
            <h1>Our Services</h1>
            <div class="row services d-block">
              <div class="col-md-3 col-sm-12 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-renren"></i>
                </div>
                <h3>Brand <span>Activation</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-user"></i>
                </div>
                <h3>Employee <span>Activity</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch more videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-meetup"></i>
                </div>
                <h3>Event <span>Organizer</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

              <div class="col-md-3 col-12 text-center">
                <div class="icon">
                  <i class="fa fa-video-camera"></i>
                </div>
                <h3>Video <span>Production</span></h3>
                <p>
                  Subscribe to our Youtube channel to watch nmore videos on web development, UI design, photoshop and Digital marketing. Don't forget to press the bell icon and never miss any new video
                </p>
              </div>

            </div>


          </div>
        </div>

      </section>

      <!-- Features Section -->

      <section class="features d-block">
        <div class="content-box">
          <div class="container">
            <div class="row">
              <div class="col-md-6 col-sm-12 col-12">
                <h2>Features Are</h2>

                <ul>
                  <li>Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text. </li>
                  <li>Some Text Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text Some Text.</li>
                  <li>Some Text Some Text Some Text Some Text.</li>
                </ul>
              </div>

              <div class="col-md-6 col-sm-12  col-12">
                <img src="img/Webz2.jpeg" alt="Picture">
              </div>

            </div>
          </div>
        </div>
      </section>
    </body>

    </html>

1 Ответ

0 голосов
/ 11 января 2020

Ваш контент больше 100vh, но вы ограничиваете контейнер до этого размера. Это одна и та же причина. 

.content-box {
  height: 100vh;
}
...