Div Overlapping another Div when reduced

Question

I am having a little issue here. When I reduced my screen, the color "Grey" runs into my white div below it for some reason. The div above it is my jumbotron, so I'm not sure why this is happening.

My website is below for you to check out and see what happens when you reduce it on a computer.

hustlebussellunlimited.com

Here is some of my CSS code below, please tell me if you need more.

.jumbotron{
    background: linear-gradient(
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.2)
    ), url(main-banner.jpg);
    background-size: cover;
    color: #ffffff;
    padding: 0;

}
.jumbotron .intro{
    background: rgba(0, 0, 0,0.1);
    padding-top: 120px;
    padding-bottom: 40px;
    min-height: 400px;
}

.jumbotron .intro .row-top div.ccont{

}
.row-bottom{
    margin-top: 20px;
    margin-bottom: 20px;
}

.jumbotron div.ccont{
    background: #fff;
    min-height: 150px;
}
.jumbotron .row-top div.ccont{
    -webkit-box-shadow: 0px 1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    0px 1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         0px 1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron .row-bottom div.ccont{
    -webkit-box-shadow: -1px -1px 2px rgba(100, 100, 100, 0.75);
    -moz-box-shadow:    -1px -1px 2px rgba(100, 100, 100, 0.75);
    box-shadow:         -1px -1px 2px rgba(100, 100, 100, 0.75);

}

.jumbotron p{
    padding: 20px 0;
}

.jumbotron .media{
    margin: 50px 0;
}
.jumbotron .media-body h1{
    margin-top: 100px;
}

section.slider{
    color: #ffffff;
    background: #696969;
    margin: 40px 0;
    padding: 40px 0;
}

section.slider h2{
    margin-bottom: 20px;
}

section.slider .col-md-8{
    padding-left: 30px;
}

Here is my HTML code

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron" id="home">
    <div class="intro">
        <div class="container">

            <div class="row">
                <h1 class="text-center"><span style="font-size:1.9em;">W</span>eb<span style="font-size:1.9em;">I</span>nsight</h1>

                <p class="text-center">A Subsidiary of HustleBussell</p><br/>
            </div>
            <div class="row triangles">
                <div class="up-triangle animated fadeInUp">
                    <div class="info">

                        Search Engine Optimization
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Web Development<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Marketing
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Systems Security<br/>

                    </div>
                </div>

                <div class="down-triangle animated fadeInDown visible-sm">
                    <div class="info">

                        Mobile App Development<br/>

                    </div>
                </div>

                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Consulting
                    </div>
                </div>
                <div class="down-triangle animated fadeInDown">
                    <div class="info">

                        Branding<br/>

                    </div>
                </div>
                <div class="up-triangle animated fadeInUp">
                    <div class="info">


                        Growth Hacking
                    </div>
                </div>


            </div>

        </div>
    </div>
</div>

<section id="services">
<div class="container">
    <!-- Example row of columns -->
    <div class="row features inner-page">
        <div class="col-md-12 text-center">
            <h2>Amplify your Reach, Achieve Massive Results</h2>

            <p style="font-size:20px;">Many people believe they can build their brand and attract new clients by being active online only and engaging in marketing practices. This is only
                partially true. In order to take your brand to the next level, you have to start with unrealistic thinking. Unrealistic meaning that we execute beyond what most people believe is possible. This thinking involves the client being at the starting point of it all. Ground Zero. This is what we call "Client Zero Thinking". WebInsight
                takes you to the next level by engaging in "BackYard Marketing", generating sales leads and boosting revenue utilizing overlooked resources.</p>
        </div>
    </div>



</div>
</section>

<section class="slider" id="features">
    <div class="container">
        <div class="inner-page">
            <h2 class="text-center">About Us</h2>

            <p style="font-size:20px;" class="text-center">WebInsight is a creative marketing and technology company based in Chicago, Illinois. Our mission statement "Provide so much value
            that the cost paid for our services is nothing compared to the benefit" is what we live by. We honor our clients and therefore we provide the best solutions
            and services for your problems. Whether you're a company just starting or an already established business, we offer results oriented solutions to help you become a market leader.</p>
        </div>



        </div>
    </div>
</section>

score 0 · Accepted Answer · edited May 23 '17 at 12:08

in the fiddle i couldn't simulate the problem but i entered and inspected your website. the problem is that the element that has that grey background , respectively .jumbotron .intro , contains the triangles.

when you resize the window, the triangles go on two rows and so the height of the .info becomes bigger and overlaps the next element ( white one ). you've hidden the triangles with visibility:hidden here (max-width: 1152px) , visibility:hidden only hides the elements but they still occupy space. you should use display:none so the elements are hidden and they don't occupy space

code :

@media (max-width: 1152px)
.up-triangle, .down-triangle {
/* visibility: hidden; */
display: none!important;
}

added the !important because you also have in your css this : .visible-sm { display: block !important;} and it's overwriting the code. i suggest you don't use !important only if you really have to.

to read more info about the difference between visibility and display see here what-is-the-difference-between-visibilityhidden-and-displaynone

Div Overlapping another Div when reduced

1 Answers1