CODEWITHSUNDEEP
twitter-bootstrapresponsive
Pinky_P
Pinky_P

Reputation: 35

Responsive div height - Bootstrap

Can anyone help me to find out what I'm doing wrong please? Click on the link to view the website with the problem please - click here

I cannot make green box responsive in height. It is scaling in width however height stays the same. I would like to have it resized together so the green box resizes in height and width at the same time and fits the screen.

Any help would be appreciated as I really do not know what could be possibly wrong there.

Thank you

Upvotes: 3

Views: 20562

Answers (2)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

You might try relative to a view point rule in Bootstrap: Relative to view point . It makes a rule where your div 100% of your screen independantly of your device. Here is an example:
<div class="min-vw-100">Min-width 100vw</div><div class="min-vh-100">Min-height 100vh</div><div class="vw-100">Width 100vw</div><div class="vh-100">Height 100vh</div>

Upvotes: 1

Sadiqali Zaveri
Sadiqali Zaveri

Reputation: 126

You can try setting the height to auto/100%.

or

This may not be what you are looking for but I had a similar problem and media queries helped me solve it.

You set a min-width and depending on that you set the heigth of the div.

 @media only screen and (min-width: 768px) {
         .loginbox
         {
          height: 120px; / height: 50%;
         }
     }

You can refer to W3schools for media queries

Media Queries

Upvotes: 2

Related Questions