Stop containers from overlapping

Question

I wrote the following code to add a contact section below a carousel (with only text):

    <div class="container-fluid margin-top-15" style="height: 50%;">
            <div class="row" style="height: 100%">
                <div class="col-md-12 col-sm-12" style="background-color: #4EA2D2">
                    <div id="carouselContent" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            <div class="carousel-item active text-center p-4">
                                <p></p>

                            </div>
<div class="carousel-item text-center p-4">
                                <p></p>

                            </div>

                        <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                    </div>
                    <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row margin-top-15">
                <div class="col-md-6 col-sm-12">
                    <h4>Contactformulier</h4>
                    <form>
                        <div class="form-group">
                            <label for="inputName">Naam</label>
                            <input type="text" class="form-control form-control-sm" id="inputName" placeholder="Vul uw naam in">
                        </div>
                        <div class="form-group">
                            <label for="inputSurname">Achternaam</label>
                            <input type="text" class="form-control form-control-sm" id="inputSurname" placeholder="Vul uw achternaam in">
                        </div>
                        <div class="form-group">
                            <label for="inputCompany">Bedrijf</label>
                            <input type="text" class="form-control form-control-sm" id="inputCompany" placeholder="Vul uw bedrijfsnaam in">
                        </div>
                        <div class="form-group">
                            <label for="inputEmail">Email</label>
                            <input type="email" class="form-control form-control-sm" id="inputEmail" placeholder="Vul uw e-mail in">
                        </div>
                        <div class="form-group">
                            <label for="inputPhone">Telefoonnummer</label>
                            <input type="text" class="form-control form-control-sm" id="inputPhone" placeholder="Vul uw telefoonnummer in">
                        </div>
                        <div class="form-group">
                            <label for="inputContact">Opmerking</label>
                            <textarea  class="form-control form-control-sm" id="inputContact" placeholder="Vul uw vraag of opmerking in"></textarea>
                        </div>
                        <button type="submit" class="btn btn-sm btn-primary">Versturen</button>
                    </form>
                </div>
                <div class="col-md-6 col-sm-12">
                    <h4>Contactgegevens</h4>
                    <ul>
                        <li></li>
                    </ul>
                    <div id="map"></div>
                </div>
            </div>
        </div>

I want to have my contact form below my carousel when using it this webpage on a mobile device, but somehow both containers are overlapping. Could anyone help me fixing this problem?

Can you setup a minimal example on something like JsFiddle or CodePen? — Austin Brunkhorst, Jan 07 '18 at 12:06
Or even in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jan 07 '18 at 12:13

score 0 · Answer 1 · answered Jan 07 '18 at 12:18

0

You need to clear the css after the carousel div

#carouselContent{
    clear: both;
}

The above piece of css code will prevent the overlapping the divs in mobile device.

If you need the detailed explanation about the clear: both css, you can find it in this answer

answered Jan 07 '18 at 12:18

Sujan Gainju

4,273
2
14
34

Nope it's still overlapping – Sander Bakker Jan 07 '18 at 12:23
Do you mind to share the example of your code in jsfiddle or stack snippet? – Sujan Gainju Jan 07 '18 at 12:27

score 0 · Answer 2 · answered Jan 07 '18 at 12:38

0

Add inline css property to the container div. You can add this css property eithr internal or from external css with a class reference like .container{clear: both;}

answered Jan 07 '18 at 12:38

Bangash

117
9

Stop containers from overlapping

2 Answers2