Creating a website and in need of a CTA image? Utilizing Bootstrap 4 along with custom CSS to tweak the appearance, I've set it to occupy the entire width of the screen using width: 100%;
. As the screen size changes, the image remains responsive, adjusting to fit the screen accordingly. However, on larger screens, the image fills the entire website, resulting in an oversized height that is less than ideal. How can this be resolved?
Below is the HTML section:
<!-- CTA Section -->
<div class="img-wrapper">
<img class="img-responsive" src="I/CTA.png">
<div class="img-overlay">
Interested in discovering more of what we offer?
<br><br>
<a href="coffee.html"><button class="btn btn-md btn-primary">
Click here</button></a>
</div>
</div>
<!-- /.img-wrapper -->
And here is the corresponding CSS snippet:
.img-wrapper {
position: relative;
}
.img-wrapper img {
width: 100%;
max-height: 650px;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
color: white;
font-size: 14px;
}
.img-overlay:before {
content: ' ';
display: block;
height: 60%;
}
button {
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
}
.btn-responsive {
/* matches 'btn-md' */
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
}
@media (max-width:760px) {
/* matches 'btn-xs' */
.btn-responsive {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
}