I’m having trouble aligning the text content equally on a ribbon banner to the left side.
Codepen
The issues I’m hoping to fix:
- The first line of text seems to be slightly more indented on the left side than the second line.
- I’m also seeing the padding on the right side of the second line more extended than the first line.
I’ve tried adjusting the CSS, but I can’t seem to get it right. Any suggestions on how to fix this alignment and padding issue? The goal is to keep the text left aligned on both lines, vertically aligned in the ribbon, and the padding equal on all sides.
Here’s the code:
CSS
/* Full-width image with ribbon text */
.ribbon-header-hero {
position: relative;
margin-bottom: 3rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.ribbon-header-hero img {
object-fit: cover;
width: 100% !important;
height: auto !important;
margin: 0;
padding: 0;
}
.ribbon-hero-text-blue, .ribbon-hero-text-white {
text-align: left;
position: absolute;
bottom: 0;
left: 0;
margin: 2%;
max-width: 90%;
}
.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
display: inline;
font-size: 1.4rem;
letter-spacing: 1px;
font-weight: 700;
line-height: 195% !important;
text-align: left;
padding: 7px 14px;
vertical-align: baseline;
text-transform: uppercase;
}
.ribbon-hero-text-blue p {
background-color: #2774ae;
color: #ffffff;
}
.ribbon-hero-text-white p {
background-color: #fff;
color: #2774ae;
}
@media (min-width: 1100px) {
.ribbon-hero-text-blue, .ribbon-hero-text-white {
max-width: 70%;
margin: 5%;
}
.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
font-size: 1.7rem;
line-height: 1.85em !important;
}
}
@media (min-width: 1300px) {
.ribbon-hero-text-blue p, .ribbon-hero-text-white p {
font-size: 2.2rem;
line-height: 1.75em !important;
}
}<div class="ribbon-header-hero"><img role="presentation" src="https://storage.googleapis.com/assets_library/canvas-template/Banners/Banner2_students.jpg" alt="" />
<div class="ribbon-hero-text-white">
<p>Begin Your<br>Learning Journey</p>
</div>
</div>Thanks in advance for your help!