Html Question posted in
Some basic documentation can be found here.

Html – Column of h2 elements takes width of the biggest, how to prevent?

I have a column of H2 elements that I rotate through with a CSS transform. For some reason the shortest H2 element takes the width of the longest H2 element. How do I prevent this?

I need the background color of the H2 element to only cover the H2 element and text. There is a line running behind the text and right now the shortest element’s background is the length of the longest and covers the line behind it with a blank space after the text.

.title {
  margin-top: -30px;
  font-size: calc(17px + (0.01* 100vw));
}

.slogan {
  background-color: #29335cff;
}


/* TEXT FLIPPER */

.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
}

.text-flip {
  animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}

.text-flip h2 {
  background-color: #29335cff;
}

@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-77%);
  }
  40% {
    transform: translateY(-50%);
  }
  60% {
    transform: translateY(-25%);
  }
  100% {
    transform: translateY(0);
  }
}
<div class='title d-flex'>

  <div class='px-2 slogan'>
    <h2>
      TAP COCKTAILS MADE
    </h2>
  </div>

  <div class='text-container '>
    <div class='text-flip d-flex justify-content-start flex-column'>
      <h2 class=''>EASY</h2>
      <h2 class=''>PROFITABLE</h2>
      <h2 class=''>TASTY</h2>
      <h2 class=''>YOUR OWN</h2>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Headings are block elements, hence, they are taking full width.

    I am updating my earlier answer with the thing you’re looking for.

    <div class='title d-flex'>

   <div class='px-2 slogan'>
      <h2>
         TAP COCKTAILS MADE
      </h2>
   </div>

   <div class='text-container '>
      <div class='text-flip d-flex justify-content-start flex-column'>
         <h2 class=''>EASY</h2>
         <h2 class=''>PROFITABLE</h2>
         <h2 class=''>TASTY</h2>
         <h2 class=''>YOUR OWN</h2>
      </div>
   </div>
</div>

.title {
   margin-top: -30px;
   font-size: calc(17px + (0.01 * 100vw));
}

.slogan {
   background-color: #29335cff;
}

/* TEXT FLIPPER */

.text-container {
   height: 2.45rem;
   background-color: transparent;
   overflow: hidden;
}

.text-flip {
   animation: text-flip 5s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
}

.text-flip h2 {
   background-color: #ff0000ff;
   display: inline;
}
.text-flip h2:after {
   content: "";
   display: block;
   width: 100%;
   background: #fff;
}

@keyframes text-flip {
   0% {
      transform: translateY(0);
   }
   20% {
      transform: translateY(-77%);
   }
   40% {
      transform: translateY(-50%);
   }
   60% {
      transform: translateY(-25%);
   }
   100% {
      transform: translateY(0);
   }
}

    Hope, this helps.

    Login or Signup to reply.
  2. 0 
    /* Container styles */
.text-container {
  height: 2.45rem;
  background-color: transparent;
  overflow: hidden;
  display: inline-block;
  position: relative;
}

/* Set up the text flip animation */
.text-flip {
  animation: text-flip 10s cubic-bezier(0.23, 0.8, 0.32, 1.2) infinite;
  display: grid;
  grid-auto-rows: 1fr;
}

/* Individual text styles */
.text-flip h2 {
  background-color: #29335cff;
  white-space: nowrap;
  width: max-content; /* Makes each item take only as much width as its content */
  margin: 0;
  padding: 0 10px; /* Optional: adds padding inside the background */
}

/* Calculate the max width and ensure all items have the same width */
.text-flip h2:first-child {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
}

/* Animation keyframes */
@keyframes text-flip {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-100%);
  }
  40% {
    transform: translateY(-200%);
  }
  60% {
    transform: translateY(-300%);
  }
  100% {
    transform: translateY(0);
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search