I have set my sights on a specific goal.
https://i.sstatic.net/BqqTX.jpg
This represents my current progress in achieving that goal.
https://i.sstatic.net/unQY9.jpg
On the left side, I have an image with a fixed height.
The aqua color fills the left side perfectly to match that height.
Then on the right column, there is a blue section followed by a green section below it that should expand vertically to fill all remaining space. However, the expansion of the green section is not working as intended.
Below is the code snippet that showcases my efforts:
<div class="full-page">
<div class="display-row">
<div class="col-lg-5 age-update rounded-border">
<div class="image-container"></div>
</div>
<div class="col-lg-7 ml-15 scale-height">
<div class="info-banner rounded-border">
<div>
<p>Free Civ Pool</p>
</div>
<div>
<p>Rotation Aug 18th</p>
</div>
</div>
<div class="events-banner rounded-border"></div>
</div>
</div> </div>
Additionally, here is the relevant CSS code I've used:
.full-page {
margin: auto;
width: 95%;
}
.full-page p {
color: white;
}
.display-row {
display: flex;
}
.rounded-border {
border-color: black;
border-width: 2px;
border-style: solid;
border-radius: 15px;
}
.age-update {
position: relative;
/* Set the desired reduced height for the container */
height: 300px; /* Adjust the value as needed */
overflow: hidden; /* Hide any overflow from the image */
}
.image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('src\assets\images\age3update.jpg');
background-size: cover;
background-position: center;
}
.scale-height {
flex-grow: 1;
background-color: aqua;
}
.info-banner {
background-color: blue;
height: min-content;
}
.events-banner {
flex-grow: 1;
flex-direction: column;
background-color: rgb(81, 255, 0);
}
I am new to CSS and eager to grasp different concepts within it.