Huge Space Below Two Rows in Bootstrap

Question

I am making design of my site in bootstrap.I am stuck at this small issue.I want to remove the unwanted space below the images.I am using bootstrap classes and scss.I know this is a very small issue but it will really save my time if someone correct me what i am doing something wrong.Just a little help required.

Unwanted Space Area:

Bootstrap Code:

 <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;

        }
    }
}

@ouchi i posted the row gap issue here.Please guide if you can — MA-2016, Feb 23 '19 at 17:57
Is it possible to add an example with your images or provide the image dimensions so we can make a demo for you? — brooksrelyt, Feb 23 '19 at 18:01
is there a way to send a private message ?..I can send you the link of the site. — MA-2016, Feb 23 '19 at 18:04
https://chat.stackoverflow.com/rooms/188931/bootstrap-help or can you send your image dimensions? — brooksrelyt, Feb 23 '19 at 18:46

brooksrelyt · Accepted Answer · 2019-02-23T19:29:55.963

1

The image positioning is messing with the div heights you have here. You can try adding a margin-top: -100px; to your anxiety section to bring it up.

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;

        }
    }
}

edited Feb 23 '19 at 19:29

answered Feb 23 '19 at 19:21

brooksrelyt

3,762
5
28
49

Tried it...It really messed up the responsiveness....Giving -100px to margin top will only work for desktop version. – MA-2016 Feb 23 '19 at 19:26
You can add a media query using bootstrap for smaller devices. Let me add the mixin for an example – brooksrelyt Feb 23 '19 at 19:28
alright...I will try this as well..will let you know once check this as well – MA-2016 Feb 23 '19 at 19:33
accepted your answer for previous question....for now can you check this as well https://stackoverflow.com/questions/54842445/unable-to-get-four-buttons-alignment-in-bootstrap-4 – MA-2016 Feb 23 '19 at 19:36
Thanks, this question is closed but let me see if I can create a codepen and send over some code – brooksrelyt Feb 23 '19 at 19:39

Huge Space Below Two Rows in Bootstrap

1 Answers1

Linked