0

Есть блок высотой 900px, при его уменьшении, этот блок отображается неправильно на экранах смартфонов, то есть остается небольшое белое пространство. Как сделать так, чтобы блок отображался на всех экранах(телефонов,ipad,ipadPro и т.д) одинаково. Знаю, что через js можно, использовав inner.height, только синтаксически не знаю как реализовать.

    <section class="wellcome_area clearfix" id="home">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12 col-md">
                    <div class="wellcome-heading">
                        <h2 style="color: #fff;">Lia</h2>
<!--                        <h3>L</h3>-->
                        <h4 style="color: #fff;">
                            Text
                        </h4>
                    </div>
                         <div class="app-download-area">
<!--
                                <div class="app-download-btn wow fadeInUp" data-wow-delay="0.2s">
                                     Google Store Btn 
                                    <a href="#contact" style="background-color: #fff;">
                                        <p class="mb-0" style="cursor: pointer; color: #fff;">Subscribe</p>
                                    </a>
                                </div>
-->
                            </div>
                        </div>
                    </div>
                </div>

CSS:

.wellcome_area {
    background-image: url(img/bg-img/mockup.png);
    background-color: #fff;
    height: 900px;
    position: relative;
    z-index: 1;
    background-position: bottom center;
    background-size: cover;
}

.wellcome_area:after {
    position: absolute;
    width: 100%;
    left: 0;
    height: 2px;
    background-color: #fff;
    content: '';
    bottom: 0;
    z-index: 2;
}
8
  • код свой покажите 6 дек 2018 в 8:17
  • Если вы имеете в виду, что блок должен всегда быть 100% от высоты области контента, то можно задать ему высоту не 900px, а 100vh 6 дек 2018 в 8:37
  • @humster_spb посмотрите, я добавил
    – Juicy134
    6 дек 2018 в 9:32
  • @КонстантинКомиссаров я сделал как вы сказали, исправилось, но все-таки есть зазор небольшой - белое пространство.
    – Juicy134
    6 дек 2018 в 9:40
  • @Juicy134, а где именно белое пространство? 6 дек 2018 в 9:41

2 ответа 2

0

Попробуй такой вариант:

body {
  margin: 0;
}

.welcome_area {
  background-image: url(img/bg-img/mockup.png);
  background-color: red;
  height: 100vh;
  position: relative;
  z-index: 1;
  background-position: bottom center;
  background-size: cover;
}

.welcome_area:after {
  position: absolute;
  width: 100%;
  left: 0;
  height: 2px;
  background-color: green;
  content: '';
  bottom: 0;
  z-index: 2;
}

.welcome-heading h2 {
  margin: 0;
}
<section class="welcome_area clearfix" id="home">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-12 col-md">
        <div class="welcome-heading">
          <h2 style="color: #fff;">Lia</h2>
          <h4 style="color: #fff;">
            Text
          </h4>
        </div>
        <div class="app-download-area">
        </div>
      </div>
    </div>
  </div>
</section>

1
  • я так делал, не получилось(
    – Juicy134
    6 дек 2018 в 10:49
0

А где там белое пространство? Я вижу на экране смартфона только 2px белая полоска, но это ваш блок .welcome_area:after Судя по классам, я вижу, что вы используете bootstrap, для него нужно сделать свой reset, т.к. в нем по умолчанию есть отступы. Можно в _grid.scss сделать так

.no-gutters {
margin-right: 0;
margin-left: 0;

> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
  }
}
Либо использовать готовый сброс стилей для нужной версии bootstrap https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-reboot.css

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.