Как исправить раздел, начинающийся с предыдущего раздела? - PullRequest
Новая
       2

Как исправить раздел, начинающийся с предыдущего раздела?

0 голосов
/ 19 мая 2019

enter image description here

Я совершенно не понимаю, почему мой следующий раздел начинается там. Я использую Bootstrap для макета.
У меня есть раздел службы под моим изображением героя, но когда я запускаю следующий раздел в разделе служб, он снова начинается под изображением героя, и я не знаю почему.

В моем разделе услуг у меня есть 4 строки и два столбца.
поэтому я попытался добавить еще один ряд и поместить следующий раздел в него, и это сработало, но я не хочу этого.

HTML-файл 


<div class="nav-wrapper">
    <input type="checkbox" id="nav-tlg" class="hidden">
    <label for="nav-tlg" class="nav-btn">
        <i></i>
        <i></i>
        <i></i>
      </label>
  <div class="logo">
      <h1>LOGO    </h1>
  </div>

  <nav>
<a href="#" id="collections-link">
  <div class="letter">H</div>
  <div class="letter">o</div>
  <div class="letter">m</div>
  <div class="letter">e</div>
</a>
<a href="#" class="active" id="new-link">
  <div class="letter">S</div>
  <div class="letter">e</div>
  <div class="letter">r</div>
  <div class="letter">v</div>
  <div class="letter">i</div>
  <div class="letter">c</div>
  <div class="letter">e</div>
  <div class="letter">s</div>
</a>
<a href="#" id="trending-link">
  <div class="letter">P</div>
  <div class="letter">o</div>
  <div class="letter">r</div>
  <div class="letter">t</div>
  <div class="letter">f</div>
  <div class="letter">o</div>
  <div class="letter">l</div>
  <div class="letter">i</div>
  <div class="letter">o</div>
</a>
<a href="#" id="popular-link">
  <div class="letter">B</div>
  <div class="letter">l</div>
  <div class="letter">o</div>
  <div class="letter">g</div>
</a>  
</nav>
</div>


<!-- Hero Image -->

  <div id="hero-container">
    <div class="hero-content flex-center">
        <h1>
           <span>REFRESH</span> YOUR WEBSITE
          </h1>
    </div>
  </div>
  <section>
  <div class="services- container-fluid" id="service-container">
    <div class="row  srv-content">
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">Minimal Design</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div>
      <div class="col-lg-7 col-sm-12">
        <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
      </div>
    </div>

    <div class="row  srv-content">
        <div class="col-lg-7 col-sm-12">
            <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
          </div>
      <div class="col-lg-5 col-sm-12 text-center">
        <h1 class="srv-heading">SEO Ready</h1>   <p class="srv-subheading">LESS is MORE</p>

        <p class="srv-info">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
        </p>
      </div> 
    </div>

    <div class="row  srv-content">
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Superfast Page Load</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div>
        <div class="col-lg-7 col-sm-12">
          <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
        </div>
      </div>

      <div class="row  srv-content">
          <div class="col-lg-7 col-sm-12">
              <img class="img-fluid" src="../assets/imgs/service/minimal-web-design-site.jpg" alt="">
            </div>
        <div class="col-lg-5 col-sm-12 text-center">
          <h1 class="srv-heading">Lead Generation</h1>   <p class="srv-subheading">LESS is MORE</p>

          <p class="srv-info">
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus, inventore ut optio cumque similique
          </p>
        </div> 
      </div>  
  </div>
</section>


<!--Why work with us comparison section-->

<section class="container-fluid">
  <div class="row">
    <h1>hjdfhsldjf</h1>
  </div>
</section>

Файл CSS 

#hero-container{
    background-image: url('../assets/imgs/heroimage.gif');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    .hero-content{

        h1{
            color: black;
            position: absolute;
            top: 25%;
            font-size: 4vw;
            span{
                color: green;
                font-weight: bold;

            }
        }
    }

}

.services-{
    height: 50vh;
    padding-top: 150px;
    padding-bottom: 40px; 

    .srv-content{
        padding-top: 7%;
        padding-bottom: 7%;

        .srv-heading{
            font-weight: bold;
            margin-top: 100px;
            padding: 0 5px;
        }

        .srv-subheading{
            margin-top: 5px;
            font-size: 15px;
        }
        .srv-info{
            margin-top: 45px;
            padding: 40px; 
            font-size: 20px;
            font-weight: 400;
        }
    }
}

и я хочу добавить следующий раздел под ним, но он не работает

Ответы [ 2 ]

0 голосов
/ 19 мая 2019

Очень незначительная ошибка. Вы ограничили рост вашего services- до 50vh. 

.services- {
    height: 50vh;
}

Полагаю, вы хотели увеличить высоту 50vh до srv-content.

А также бонусное редактирование, сделайте ваш hero-container позиционированным относительно, чтобы ваша h1 внутри (которая позиционировалась как абсолютная) не вырвалась из hero-container.

Здесь - скрипка с комментариями.

0 голосов
/ 19 мая 2019

введите описание изображения здесь

sevices image

hero image

код CSS 

#hero-container{
    background-image: url('../assets/imgs/heroimage.gif');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;   
}
.hero-content  h1{
            color: black;
            position: absolute;
            top: 25%;
            font-size: 4vw;  
}
 .hero-content h1span{
                color: green;
                font-weight: bold;

            }

.services-{
    height: 50vh;
    padding-top: 150px;
    padding-bottom: 40px; 
}



    .srv-content{
        padding-top: 7%;
        padding-bottom: 7%; 
    }

       .srv-heading{
            font-weight: bold;
            margin-top: 100px;
            padding: 0 5px;
        }

        .srv-subheading{
            margin-top: 5px;
            font-size: 15px;
        }
        .srv-info{
            margin-top: 45px;
            padding: 40px; 
            font-size: 20px;
            font-weight: 400;
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...