CODEWITHSUNDEEP
htmlcss
CYBERSIX
CYBERSIX

Reputation: 377

css container is not adjusting when i resize the browser

i have a container that holds an image slider and images are responsive but when i resize the browser i get this big gap between my slider and the next div with the class container why is that?

<!-- Image Slider  -->
<div class="container">
    <div id="slider">
        <div id="left-side-slider">
            <img src="img/test.jpg" alt="">
        </div>
        <div id="right-side-slider">
            <img src="img/precher.jpg" alt="">
            <img src="img/sermons.jpg" alt="">
        </div>
    </div>
</div>     

<!-- End of Image Slider  -->

<!-- Welcome Message   -->
<div class="container">
    <div id="welcome-message">
        <h1><span></span> WELCOME TO OUR CHURCH</h1>
        <article>
            Our Mission is to glorify God, proclaiming and following Christ, in the power of the Holy Spirit.
        </article>
    </div>
</div>

<!-- End of Welcome Message   -->

the css section is 

.container{
    max-width: 960px;
    margin: 0 auto;
    padding: 0px 20px;
}


/*  Image Slider section */
#slider {
    margin-top: 10px;
    min-height: 350px;
}

#left-side-slider {
    width: 72%;
    float:left;
    margin-right: 2%;
}

#left-side-slider img , #right-side-slider img {
    width: 100%;
}

#right-side-slider {
    width: 25%;
    float: left;
}

 /* Welcome Message */
 #welcome-message {
    background-color: @bg-color;
    height: 200px;
    margin-top: 1%;
 }

  #welcome-message h1 {
    padding-left: 50px;
    padding-top: 30px;
    font-family: @Oswald;
    font-size: 35px;
    color: @white;
   }

   #welcome-message span {
    border-left: 1px solid @white;
    padding-right: 15px;
   }

   #welcome-message p {
    font-family: @OpenSans;
    font-size: 32px;
    color: @light-gray;
    padding-left: 50px;
   }

Upvotes: 2

Views: 75

Answers (1)

Simply Craig
Simply Craig

Reputation: 1114

Because you use min-height: 350px; for 

#slider {
    margin-top: 10px;
    min-height: 350px;
}

Just remove min-height

Working JSFiddle: http://jsfiddle.net/tzfzjyp8/

Upvotes: 1

Related Questions