Как сделать так, чтобы контент занимал всю высоту секции?

Question

[Norum]

Я использовал Swiper JS для слайда целых полноэкранных секций, но столкнулся с проблемой: содержимое в Swiper не хочет растягиваться на всю высоту секции, так как у меня для section стоит правило padding: 80px 0, можно было бы убрать это правило, но тогда все будет выглядеть не так как мне нужно . Как сделать так, чтобы слайдер растягивался на всю высоту секции .services и контент при этом никуда не уплывал.
PS я сделал фон зеленым специально, чтобы было видны отступы и чтобы перейти к следующему слайду надо нажать "Узнать подробнее"

Сам сайт ca50234.tmweb.ru
Весь код https://jsfiddle.net/u3vp4rto/

Answer 1

[Salim]

Добрый день, Вам надо

.services-second-slider, .services-third-slider {
    background: url(../img/services-bg.jpg) center no-repeat;
    background-size: contain;
    background-position: left;
    color: #fff;
}

вот тут у вас стоит background-size: contain; и background-position: left; вам надо поменять на
background-size: cover; background-position: right;
и еще вам надо адаптировать под более маленькие экраны

Comments

[Norum]

это не поможет, так как у меня проблема не с расположением фоновой картинки, а то что контент Swiper JS не занимает всю высоту секции

[Salim]

Norum, Вам нужно чтобы не было отступов ? "Зеленых полос снизу и сверху секции"

[Norum]

Salim, именно

[Salim]

В таком случае вам нужно просто добавить padding: 0; в .services и полосы уберутся но вы сказали что это не будет так как вы хотите, а как именно вы хотите ?
если не убрать padding то растянуть всю секцию не получится