I am facing an issue with my web layout where I have two elements that are supposed to occupy 25% and 75% of the screen height using Bootstrap 4's row directives. However, it seems like these directives are not affecting the height of the elements as intended.
https://i.sstatic.net/qzyuy.jpg
Upon inspection, it appears that the email form and image view are only taking up the minimum height required to contain their contents. Can anyone pinpoint what might be going wrong in this setup?
<template>
<div class="container h-100" id="app">
<div class="row h-25">
<div class="image-container row justify-content-center align-items-center">
<img src="../assets/images/snaprefund_thin_stroke_cropped_opaque.png" alt="SnapRefund">
</div>
</div>
<div class="row h-75">
<EmailForm/>
</div>
</div>
</template>
<style>
.container {
margin: 0;
background: url(~@/assets/images/pic.jpg) repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.image-container {
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 40%;
max-width: 40%;
}
</style>