I'm currently working on a website layout that utilizes Bootstrap rows and columns to separate text content from images.
Here's an example of the structure in my HTML file:
<div class="row">
<div class="col-sm">
<h1>A lengthy header with underscore</h1>
<h3>Subheader goes here</h3>
<p>Description text is included here</p>
</div>
<div class="col-sm">
<figure class="figure">
<img src="/assets/contentImage4.jpg" alt="Placeholder" class="img-fluid img-thumbnail content-image">
<figcaption class="figure-caption">Caption for the image</figcaption>
</figure>
</div>
</div>
The CSS code associated with this layout looks like this:
.figure {
display: block;
margin: auto;
margin-top: 45px;
margin-bottom: 45px;
width: 40%;
text-align: center;
}
h1, h2 {
font-family: 'Work Sans', sans-serif;
border-bottom: 4px solid black;
}
I've adjusted the top margin of the image by 45 pixels so that it aligns with the underline under the h1 element. However, when the title wraps onto two lines due to its length, the alignment gets disrupted. Is there a way to dynamically adjust this based on how the h1 wraps?