htmlcsstext-alignmentbannertext-align

Multi-line Banner Text Not Aligning to the Left Equally

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:

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!

Solution

  • It's because you are using the <br> tag in the <p> tag and the css spacing attributes are not reading them as two separate lines. You should separate them into two tags. That way the css spacing attributes will be applied properly

    /* 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</p>
    <br>
    <p>Learning Journey</p>
</div>
</div>