CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Lera Zemlyanaya
Lera Zemlyanaya

Reputation: 115

Container content changes proportion on window resize

The web page looks fine. However, when changing my browser window size, the content of the container is pushed up and down. Thus it either leaves a lot of container free space or just disappears (like it is under the next container).

enter image description here

But I would like it to always be inside the container with the same proportions.

Here is my code:

  .first {
  padding-left: 5%;
  }

   .second {
       padding: 80px 50px 0px 70px;
       background-size: cover;
    }

    .fourth {
        margin-top: 7%;
    }

    .third {
     padding-top: 80px;
          padding-bottom: 65px;
          height: 678px;
          position: relative;
          width: 100%;
          min-height: auto;
          overflow-y: hidden;
          background: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
          background-size: cover;
    }

    .selling-text {
        font-family: Ubuntu;
        font-size: 20px;
        padding-top: 27%;
        text-align: center;
        color: black;
        margin-left: 2%;
    }


    .second-block {
        background: #F2EADC;
        height: 500px;
         background-image: url("http://www.planwallpaper.com/static/images/824183-green-wallpaper.jpg");
         background-size: cover;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="third container-fluid">
    <div class="col-md-6">
        <div class="device">
            <div class="screen">
                <!-- Demo image for screen mockup, you can put an image here, some HTML, an animation, video, or anything else! -->
                <img src="http://happybirthdaycakeimages.com/wp-content/uploads/2015/05/Yummy-Chocolate-Birthday-Cake.jpg" class="img-responsive first" alt="">
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="second">
            <img src="http://gypsea.com.au/wp-content/uploads/2015/07/freeship.png" class="img-responsive" alt="">
            <div class="fourth">
                <button type="button" class="button  btn-block">MENU</button>
            </div>
        </div>
    </div>
</div>


<div class="second-block container-fluid">
    <div class="col-md-6">
        <div class="screen">
            <p class="selling-text">
                See the best cake recipes.
                Trusted recipes for chocolate cake,
                white cake, banana cakes,
                and carrot cakes with photos and
                tips from home cooks.
            </p>
        </div>
    </div>

    <div class="col-md-6 second">
        <div class="videoWrapper shadow">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/JM_Q7HR55DY" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>

</div>

I don't know why JSFiddle doesn't work with jQuery 1.11.1, it looks different from what I see connecting it locally.

Upvotes: 1

Views: 830

Answers (1)

tech4242
tech4242

Reputation: 2468

Ok, I think that the problem is with the fixed height for your <div class="third container-fluid">, which has a height of 678px. To be more specific: as the columns move when you resize your window, the fixed height is becoming a problem because your container has less px than the combined height of your child elements - the col's.

Here is a JSFiddle where I have just commented out the fixed height

Upvotes: 1

Related Questions