Bootstrap CSS fixed height for div on mobile

Question

I have a div with a fixed height.

<div class="col-md-12" style="height:250px;">
<img src="example.png" />
</div>

When I resize the screen to mobile, my div width is responive and shrinks but the height still keeps the same.

It's quite hard to formulate my question but is there anyway to use a fixed height but make it responsive ?

Answer 1

Add @media query to your css file to override the original one. Something like this:

@media screen and (min-width: 1024px) {
    myNewDivHeight{
        height:250px;
    }
}

Add this class to your div like:

class="col-md-12 myNewDivHeight"

When the screen res. is over 1024px this will work. When you shrink it will not work, so bootstraps responsive will trigger. Or you can add new media queries for other resolutions.