Struggling to achieve consistent text alignment on a ribbon banner? Check out the issue I'm facing and see if you have any suggestions on fixing it:
Main issues:
- The first line of text appears slightly more indented on the left side compared to the second line.
- There seems to be more padding on the right side of the second line than the first line.
I've tried adjusting the CSS but haven't been successful in achieving the desired result. Any tips on correcting this text alignment and padding discrepancy? The objective is to maintain left-aligned text on both lines, ensure vertical alignment within the ribbon, and keep padding uniform on all sides.
Provided code snippet:
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>
Appreciate your assistance in advance!