Currently, I am using flex to ensure that the two inner div elements have the same height. However, the design is not responsive as it appears perfectly in a full-width window but gets squeezed on mobile devices.
Is there a solution to this issue?
Are there alternative methods to achieve equal heights for the two side-by-side divs without setting a fixed height property due to dynamic data?
For more details, please refer to my fiddle link: link
.image-bg-fluid-height {
background-color: black;
padding: 51px 0 0 0;
}
<!-- More CSS code here -->
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.ui-autocomplete {
position: absolute;
cursor: default;
z-index: 30 !important;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="image-bg-fluid-height" style="display: flex;">
<div class="col-md-8 gradient-background">
<!-- HTML structure -->
<!-- More HTML code here -->
</header>Please note: The top black part serves as padding for my header section.
Thank you.