0

This code makes the square fully responsive.

http://jsfiddle.net/9ow3ymfz/

How can I reach the same goal with a rectangle?

I'm trying to use CSS to make the rectangle fully visible if the screen height is less than the height of the rectangle without the need to scroll.

The code below works fine with different screen widths, but if the height is not high enough, the rectangle does not shrink in size as required but creates an area for scrolling.

How can I get rid of the need to scroll with a small screen height, so that the entire rectangle consisting of squares fits into the entire screen area without the need to scroll?

Thanks & hope for your help.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Golden Ratio</title>
    <style>
        #box1 {
            width: 38%;
            padding-top: 38%;
            background-color: #46BC8F;
            float: left;
        }
        #box2 {
            width: 62%;
            padding-top: 62%;
            background-color: #8AD5BA;
            float: right;
        }
        #box3 {
            width: 100%;
            padding-bottom: 100%;
            background-color: #59D48B;
            float: right;
        }
        @media screen and (orientation:landscape) {
    .container{
        height: 100vh;
        width: 100vh;
    }
}
    @media screen and (orientation:portrait) {
    .container{
        height: 100vw;
        width: 100vw;
    }
}
    .container{
        margin: 0 auto;
    }
}
    </style>
</head>
<body>
    <div class="container">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
</body>
</html>

Ratio looks well with changing width

But here something similar to "contain" is needed, because it's croped

Dmitry
  • 29
  • 6
  • Works fine for me: https://jsfiddle.net/kzhao14/shwofxjm/ – kzhao14 Apr 11 '20 at 23:55
  • It's not shrinking fully vertically – Dmitry Apr 12 '20 at 00:01
  • It shrinks to window's height regardless of how small it is: https://imgur.com/a/wvFWwVI. Is that not what you're looking for? – kzhao14 Apr 12 '20 at 00:03
  • As you can see the entire rectangle cannot be seen now on very small screen height without need to scroll, but I'm looking for fix to this so the entire minimized rectangle could be seen on landscape orientation minimized but as whole rectangle and without need to scroll down the mouse. Thanks. – Dmitry Apr 12 '20 at 00:22

0 Answers0