CODEWITHSUNDEEP
htmlcssbootstrap-4
Mustafa AHCI
Mustafa AHCI

Reputation: 215

bootstrap different height ratio expect 1:1 for columns when small devices view

First of all, I had no idea what kind of research I should do. So I may have asked a duplicate question.

Anyway, I have a simple code like this:

#my-container {
    height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div id="my-container" class="container-fluid p-0 m-0">
    <div class="row p-0 m-0 h-100 text-white">
        <div class="col-sm-8 bg-success">COL 1</div>
        <div class="col-sm-4 bg-danger">COL 2</div>
    </div>
</div>

As you can see, I have 2 columns in 8 by 4 ratio that cover the whole page. And as you know, when viewed on these small devices, it appears in 2 rows at a 1:1 ratio. Like This:

But I want a different height ratio for these two columns. For example, like this (8:2): enter image description here

Upvotes: 0

Views: 285

Answers (1)

nvkrj
nvkrj

Reputation: 1033

col-sm-8 and col-sm-4 specifies the width of the columns, not their heights. If you want the columns' heights to be in a specific ratio, you will need to adjust that by explicity defining their heights in a css @media query like this:

#my-container {
    height: 100vh;
}

@media(max-width: 600px) {
    #my-container .col-sm-8 {
        height: 66.66%;
    }
    #my-container .col-sm-4 {
        height: 33.33%;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div id="my-container" class="container-fluid p-0 m-0">
    <div class="row p-0 m-0 h-100 text-white">
        <div class="col-sm-8 bg-success">COL 1</div>
        <div class="col-sm-4 bg-danger">COL 2</div>
    </div>
</div>

Upvotes: 2

Related Questions