Огромное пространство под двумя рядами в начальной загрузке

Question

Я делаю дизайн своего сайта в начальной загрузке. Я застрял в этой маленькой проблеме. Я хочу удалить ненужное пространство под изображениями. Я использую классы начальной загрузки и scss. Я знаю, что это очень маленькая проблема, но этодействительно сэкономит мое время, если кто-то исправит меня в том, что я делаю что-то не так. Требуется небольшая помощь.

Площадь нежелательного пространства:

Код начальной загрузки:

 <section class="homepage-banner-section">

            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4">
                         <div style="height: 67%;">     
                            <img src="img/home-banner-one.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                         </div>
                    </div>
                    <div class="col-lg-8 col-md-8">
                        <div class="row">
                            <div class="col-12">
                                <div class="therapy-text-wrapper">
                                    <h2 class="therapy-text text-center">Start you therapy now!</h2>
                                </div>
                            </div>
                            <div class="col-12">

                                <div style="height: 60%;">  
                                    <img src="img/home-banner-two.png" class="img-fluid mh-100" style="width: 100%; height: 100%;" alt="Responsive image">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="anxiety-text-wrapper">
                            <h2 class="anxiety-text text-center">Anxiety is very common:<br>
                            worldwide 1 in 14 people <br>
                            have disabling anxiety.</h2>
                        </div>
                    </div>
                </div>
            </div>

        </section>

SCSS:

.homepage-banner-section{

    padding-top: 2%;

    .therapy-text-wrapper{

        .therapy-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper{
        text-align: center;
        padding: 2% 0;

        .anxiety-text{

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}

Answer 1

Положение изображения портится с высотами div, которые у вас есть.Вы можете попробовать добавить margin-top: -100px; в раздел тревог, чтобы вызвать его.

SASS:

.homepage-banner-section {

    padding-top: 2%;

    .therapy-text-wrapper {

        .therapy-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;

        }
    }

    .anxiety-text-wrapper {
        margin-top: -100px;
        text-align: center;
        padding: 2% 0;

        @include media-breakpoint-down(md) { 
            margin-top: -10px; 
            // Change or disable the margin here for anything smaller than a medium screen
        }

        .anxiety-text {

            background-color: $baby-blue;
            color:$white;
            text-align: center;
            padding: 3% 0;
            font-family: Merriweather-Italic;
            font-style: italic;

        }
    }
}