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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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