CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user1547410
user1547410

Reputation: 893

Image overlapping div responsive issue

In this page which is basically the carousel page from here: http://getbootstrap.com/examples/carousel/

I edited it to add a section with an image overlapping a div. Now in general it looks like i want however as you change the resolution of the browser window the layout of the text changes so on one resolution a whole paragraph is cut off, on another layout less is cutoff so depending on what text i end up with at different resolutions it might or might not get cutoff. I can increase the height of the blue section to accomodate but what i really want is for it to expand to fit the text plus leave some padding-bottom.

How would i make it consistent so there is always 40px of padding after the text and all text shows in the blue section under the image?

URL is here: http://192.34.63.75/test.html

Only css i edited was:

<style>
    .blue {
        color: #ffffff;
        background-color: #009cde;
        background-image: radial-gradient(circle farthest-side at center bottom, #009cde, #003087 125%);
        height:500px;
    }

    #situational {
        padding-top:100px;
        margin:0 auto;
        text-align: center;
        height:450px;
    }

    .overlap-image {
        max-width: 100%;
        height:auto;
        position:relative;
        z-index:10;
    }
</style>

Upvotes: 0

Views: 82

Answers (1)

Korgrue
Korgrue

Reputation: 3478

.blue {
    color: #FFF;
    background-color: #009CDE;
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
    height: 500px;
}

Change to 

.blue {
    color: #FFF;
    background-color: #009CDE;
    background-image: radial-gradient(circle farthest-side at center bottom , #009CDE, #003087 125%);
    padding-bottom:50px;
}

The div will take up the height of the paragraph, plus 50px of padding at the bottom. Never set fixed heights on responsive divs. Let the content of the div control the div height.

Upvotes: 1

Related Questions