Я использую класс vh-100 для создания нескольких экранов / разделов. Идея в том, что это шаг 1, 2 и т. Д. c ..
Кажется, что отлично работает на настольном устройстве, но при уменьшении экрана до sm-устройства все кажется перекрывающимся.
Я использую гибкие утилиты для выравнивания элементов по центру секции, но на мобильном телефоне она перекрывается.
JS Здесь можно увидеть скрипку: https://jsfiddle.net/km3v12gz/
Любые идеи или причины, почему это произойдет?
HTML это:
<section id="step-1" class="vh-100 align-items-center d-flex position-relative">
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 mb-4 mb-sm-0">
<div class="text-center">
<h2 class="mb-4">Select an option</h2>
<a class="button -primary u-block-mobile d-inline-block mr-2 mt-1 mt-sm-0" href="#">Sell</a>
<a class="button -primary u-block-mobile d-inline-block mb-2 mt-1 mt-sm-0" href="#">Rent</a>
</div><!-- /.text-center -->
</div><!-- /.col-sm-8 -->
<div class="col-12 col-sm-4">
<div class="text-center">
<h2 class="mb-4">Enter your postcode</h2>
</div><!-- /.text-center -->
<input class="postcode form__input -light w-100 mb-3 text-center" name="postcode" type="text" placeholder="Enter Postcode">
<button class="button -secondary w-100 find-address" type="submit">Find Address</button>
<div class="hidden-addresses mt-3 mb-3" style="display: none;">
<div class="row">
<div class="col">
<select class="addresses">
<!-- /jQuery Populate -->
</select>
</div>
</div><!-- /.row -->
</div><!-- /.hidden-address -->
<div class="hidden-address mt-3 mb-3" style="display:none;">
<p>Address of Property:</p>
<div class="property-address">
<!-- /.jQuery Populated -->
</div><!-- /.property-address -->
</div><!-- /.hidden-address -->
<div class="d-block mt-2">
<a href="#">Enter your address manually</a>
</div><!-- /.d-block -->
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<section>
<div class="vh-100 align-items-center d-flex position-relative flex-grow-1">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Choose a date & time</h3>
</div><!-- /.text-center -->
<div class="row">
<div class="col">
<div class="text-center">
<strong class="d-block mb-4">February
/ March
2020
</strong>
</div><!-- /.text-center -->
</div><!-- /.col -->
</div><!-- /.row -->
<div class="pl-2 pr-2 pl-sm-5 pr-sm-5">
<div class="row seven-cols">
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Sa</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-22">
22
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Su</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-23">
23
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Mo</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-24">
24
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Tu</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-25">
25
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">We</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-26">
26
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Th</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-27">
27
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Fr</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-28">
28
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-29">
29
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-01">
01
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-02">
02
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-03">
03
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-04">
04
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-05">
05
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-06">
06
</a>
</div><!-- /.text-center -->
</div>
<div class="col-12 mt-3 mb-3">
<div class="row slots">
<!-- /.jQuery -->
</div><!-- /.slots -->
</div><!-- /.col-12 -->
</div><!-- /.row -->
</div><!-- /.pl-5 -->
</div><!-- /.col-6 -->
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Your Details</h3>
</div><!-- /.text-center -->
</div><!-- /.col-6 -->
</div><!-- /.row -->
</div>
</div><!-- /.align-items-center -->
</section>
Спасибо