CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Giacomo
Giacomo

Reputation: 341

Div's height responsive

i am writing to you with big problem,

if you make your browser window smaller, height does not change. Can someone help me fix it?

Here is fragment of html(with image background):

<div class="container">
<div class="slider" id="section1">
<div class="naglowek">
<h1>POLSKA - FRANCJA</h1>
<h2>NIEMCY - LUXEMBURG - BELGIA</h2>
<h3>Szybki i bezpieczny transport od drzwi do drzwi</h3>
<br />

<button type="button" class="btn btn btn-danger btn-lg" onclick="window.location.href='#section5'">ZAREZERWUJ</button>
</div>
</div>
...

And css fragment:

.slider{
    width:100%;
    height: 700px;
    margin-top: 58px;
    background-image: url("img/baner2.png");
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    display: block;
}
.container{
    position: relative;
    height: 100%;
    margin: 0 auto 0;
}

I know, that now is bad with height: 700px;but i dont know how fix it.

I use bootstrap.

Upvotes: 0

Views: 1718

Answers (2)

Ben Paddock
Ben Paddock

Reputation: 273

Hmm, so you can use "vw" on the height, which will force the height of the container to listen to the width of the browser window (and slide everything up or down accordingly). That will make it very tall for wide browsers, but you can set a max-height of 700px.

So:

.slider {
    width: 100%;
    height: 50vw;
    max-height: 700px;
    position: relative;
    margin-top: 58px;
    background-image: url(img/baner2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    display: block;
}

.naglowek {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

Upvotes: 1

user1758720
user1758720

Reputation:

use media query to fix it, so once the screen is smaller, you reduce the height of the div.

@media only screen and (max-width: 500px) {
.slider{
width:100%;
height: 300px;
}
}

Means once the screen is smaller than 500px, the height will reduce

Upvotes: 2

Related Questions