Banner Text Alignment Issue: Uneven Left Alignment

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:

Link to Codepen

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!

Answer №1

The issue arises from using the <br> tag within the <p> tag, causing the css spacing attributes to not recognize them as separate lines. To resolve this, it is recommended to use two distinct tags for each line so that the css spacing properties can be appropriately applied.

/* Styling for 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Autofocus Styling with CSS Bootstrap

Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...

"Creating eye-catching popup images in just a few simple steps

<div className="Image popup"> <Modal isOpen={modalIsOpen} onRequestClose={closeModal} contentLabel="Image popup" > <img src="../img/navratri-1.png" alt="Image popup" /> <b ...

What is the best way to adjust the size of the box while ensuring that the text remains centered inside it

Consider the HTML snippet below: <div class='title'><h2>Title</h2></div> I attempted to adjust the size of the box with the following CSS: .title { display: block; border-radius: 12px; border: 1px solid; } The resultin ...

Troubleshooting Paths with Angular's NgFor Directive

Within my Angular project, I have implemented a basic ngFor loop to display logo images. Here is a snippet of the code: <div *ngFor="let item of list" class="logo-wrapper"> <div class="customer-logo"> & ...

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Hey there! I'm currently working on a new menu design using UL and LIs elements. I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen. If you're interested ...

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

Javascript function for downloading files compatible with multiple browsers

When working with a json response on the client side to build content for an html table, I encountered an issue with saving the file to the local disk upon clicking a download button. The csvContent is generated dynamically from the json response. Here&ap ...

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

Executing PHP code on button click in HTMLThe process of running a PHP script when

I am currently working on a project that involves detecting facial expressions using Python. However, I need to pass an image to this code through PHP. The PHP code provided below saves the image in a directory. How can I trigger this code using an HTML ...

Missing Home and Search icons on Jquery mobileNavigationBar

I am having an issue where the Home and search icons are not displaying properly in the output. Instead, they are showing up as hyperlinks. Can someone please help me with this? Here is the code I am using: <meta name="viewport" content="width=device ...

Adjusting an image size using JQuery after resizing a canvas will only resize the image itself, not

How can I resize an image within a canvas using JQuery in a way that only the image is resized, not the entire canvas? function resizeImage(width, height){ var image = document.getElementById('resizeImage'), canvas = document.createEleme ...

Revise website design to adjust dynamically according to screen dimensions

Currently, I am working on a school project with a website created by former students. Unfortunately, I have limited knowledge of HTML and CSS which has made it challenging for me to ensure the site is mobile-friendly. There are issues such as text overflo ...

Move the footer down to the bottom of the page

I'm struggling to create a footer that consistently stays at the bottom of the page, regardless of the amount of content on the page. I've tried following various tutorials but haven't had much success. I'm starting to think I must be d ...

Pointer-events property in pseudo elements not functioning as expected in Firefox browser

I have a horizontal menu that includes mid-dots (inserted using the ::after pseudo element) to separate the menu items. I want to prevent these mid-dots from being clickable. This works fine in Safari, but in Firefox (v.47), the pointer-events: none prope ...

Having trouble interacting with an xpath-selected element in Selenium using Python?

I've been attempting to click on an element that I've selected using Xpath, but it appears that I am unable to locate the element. Specifically, I'm trying to click on the "Terms of Use" button on the page. The code snippet I've written ...

Is it possible to create a masonry-style layout with two columns that is responsive without

Is there a way to organize multiple divs of varying heights into two columns that display immediately one after the other, without relying on JavaScript or libraries like packery or masonry? I've experimented with using display: inline-block in this ...