Подключила на лендинг плагин FullPage.
При размере экрана, меньшем необходимого, плагин выключается и в нескольких местах летит верстка.
Никак не пойму, какие же стили плагина перекрывают мои и почему.
Пример такой секции:
html
<section class="fifth vertical-scrolling">
<div class="row">
<iframe class="map" src="https://yandex.ru/map-widget/v1/-/CBa7V4F-SB" width="75%" height="auto" frameborder="0"></iframe>
<div class="block block-size-s info-block">
<adress>
<h3>Наш адрес:</h3>
<span>Город</span><br>
<span>Улица</span><br>
<span>Телефон</span><br>
<span>E-mail<br>
</adress>
</div>
</div>
</section>
CSS
section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.block {
display: flex;
flex-direction: column;
padding: 5%;
line-height: 1.5;
}
.block-size-s {
max-width: 20%;
}
.info-block {
justify-content: flex-start;
box-shadow: 0px 0px 5px 0px lightgrey;
background-color: rgb(255,255,255);
}
Подключение слайдера
var doFullpage = document.documentElement.clientWidth;
if (doFullpage > 768) {
$('#fullpage').fullpage({
sectionSelector: '.vertical-scrolling'
});
}
Простой
