CODEWITHSUNDEEP
htmlcsssass
T. Karter
T. Karter

Reputation: 738

How to avoid div content getting bigger than screen height?

I created an iPad that should challenge every responsive scenario (work in process). It is working for orientation already, but currently, when I'm in landscape mode and the browser width is getting bigger and bigger, the .ipad gets outside the screen. The .ipad_wrapper doesn't and want the .ipad to behave the same.

Here is my code: https://jsfiddle.net/zw4shn2v/

.ipad_wrapper
    width: 80vw
    max-height: 90vh
    outline: 1px solid red

    .ipad
        width: 100%
        padding-top: 76.59%
        height: 0
        margin: 0 auto
        position: relative

 <div class="ipad_wrapper">
      <div class="ipad">
        <div class="ipad__front">
          <div class="ipad__screen"></div>
        </div>
      </div>
</div>

Upvotes: 0

Views: 1763

Answers (2)

Tom_Ra
Tom_Ra

Reputation: 133

  1. remove min-height from body
body
   min-height: 100vh
  1. you are missing 1 closing div. change HtmL to:
<div class="ipad_wrapper">
      <div class="ipad">
        <div class="ipad__front">
          <div class="ipad__screen"></div>
        </div>
      </div>
</div>

Upvotes: 0

Karanveer Singh Jhala
Karanveer Singh Jhala

Reputation: 101

Looked at your JSFiddle and the issues are:

  1. Your body sass has min-height: 100vh, remove this or switch to max-height -
body
   background: linear-gradient(315deg, #7B9195 100%, #B8D0D3 0%)
   min-height: 100vh // remove this out OR change to max-height.... 
   display: flex
   justify-content: center
   align-items: center
  1. You have a Typo in .ipad class, You have typed “height” —

.ipad
        width: 100%
        padding-top: 76.59%
        hight: 0 // change this to height
        margin: 0 auto
        position: relative

Let me know if this works out for you :)

Upvotes: 1

Related Questions