Having difficulty getting the button in my right column to occupy the entire height and width of the column. I've tried adjusting heights, setting positions, but still can't seem to get it right with this odd structure.
My development frameworks are Twitter Bootstrap 4, SCSS, and jQuery.
The Bootstrap code snippet:
.cta-section {
background: #243635;
.center-align {
align-items: $center-align;
}
.section-content-left {
text-align: left;
padding: 2.625rem 3.5rem 2.625rem 8.125rem;
}
h2 {
font-size: $h2size;
font-family: $nunito;
font-weight: 200;
color: $colorwhite;
}
p {
font-size: $font15px;
color: $colorwhite;
line-height: 1.625rem;
opacity: .77;
}
.cta-block-right {
background: $colorgreen;
font-family: $nunito;
color: $colorwhite;
.cta-large {
color: $colorwhite;
b {
color: $colorwhite !important;
}
}
}
} // End Cta Section<div class="cta-section">
<div class="container-fluid">
<div class="row center-align">
<div class="col-md-8 col-sm-12">
<div class="section-content-left">
<h2> We Make It Easy To Find Work You Love</h2>
<p> It can seem daunting applying for a new career. Not to mention that you're interested in doing it in an innovative way (remotely). Don't worry, we have a simple process and we'll walk you through from start to finish. </p>
</div>
<!-- end section-content-left -->
</div>
<!-- col-md-8 col-sm-12 -->
<div class="col-md-4 col-sm-12 column-bg-green" style="
height: 100%;
width: 100%;
position: relative;
">
<div class="cta-block-right" style="
/* position: absolute; */
">
<a class="cta-large" href="#"> <b> See Our Process </b> </a>
</div>
<!-- end cta-block-right -->
</div>
<!-- end col-md-4 col-sm-12 -->
</div>
<!-- end row -->
</div>
<!--end container -->
</div>