Scaling height in css responsive grid

Question

I have set up a simple page with a rensponsive css grid that I read in this article on w3schools:

https://www.w3schools.com/css/css_rwd_grid.asp

The scaling on width works fine.

I have two things I am not able to sort out:

I've set up a max width on the page of 960px and when I make the viewport smaller the width scales fine, but for the buttons I have up at the top I want them to have a height of 125px when the page is at its max width and then scale down proportionaly with the width.
For the dummy2 and dummy3 buttons I want them to have 50% of the height in that grid row.

Her is a jsfiddle of what I got: https://jsfiddle.net/nyehc0g9/

Heres the code:

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        html {
            margin: 0 auto;
            max-width: 960px;
        }
        body {
                background-color: black;
        }
        * 
        {
            box-sizing: border-box;
        }
        .row::after
        {
            content: "";
            clear: both;
            display: table;
        }
        [class*="col-"]
        {
            float: left;
        }
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}

        .button
        {
            background-color: grey;
            color: white;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            cursor: pointer;
            border:none;
            outline: white solid;
            width: 100%;
        }

        img {
            width: 100%;
            height: auto;
        }

        .button-0
        {
            width: 100%;
            height: 125px;
        }

        .button-1
        {
            width: 100%;
            height:50%;
            display: inline-block;
        }
    </style>
    </head>
    <body>
        <div class="row">
            <div class="col-3"><button class="button button-0" href="">Dummy0</button></div>
            <div class="col-6"><button class="button button-0" onclick="javascript:history.go(0)">Refresh page</button></div>
            <div class="col-3"><button class="button button-0">Dummy1</button></div>
        </div>
        <div class="row">
            <div class="col-5">
                <img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
            </div>
            <div class="col-2">
                <button class="button button-1" href="">Dummy2</button>
                <button class="button button-1" href="">Dummy3</button>
            </div>
            <div class="col-5">
                <img src="https://pbs.twimg.com/profile_images/737359467742912512/t_pzvyZZ.jpg"/>
            </div>
        </div>
    </body>
</html>

Answer 1

Just add

.button-0{
 height: 9vw;
 max-height: 125px;
}
.row{ 
 display: flex; 
 display: -webkit-flex; 
}

Should do the trick! Adjust the height: 9vw to whatever you think is optimal while scaling down.

Scaling height in css responsive grid

Question

1 answers

solution1
1 ACCPTED 2017-09-27 21:06:00

Scaling height in css responsive grid

Question

1 answers

solution1 1 ACCPTED 2017-09-27 21:06:00

solution1
1 ACCPTED 2017-09-27 21:06:00