Search code examples
htmlcsscss-positionpositioning

Shopping cart styles - CSS behavior

I'm trying to style my shopping cart <div> that contain number of items in it.

I am trying to make it responsive depending on its content. It should look well with innerText.length = 0-5. With the number of items equal to 12345, it moves on the cart icon. It should expand to the right and should not touch the icon in the center of the container.

I can make it with pure JS with dependencies (more characters = lower font size) but I want to make it in CSS.

Here's the code:

.cart-box {
        display: inline-block;
        position: relative;

        .cart-image {
          width: 55px;
          height: 50px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          i {
            margin-right: 5px;
          }
        }
        .cart-counter {
          min-width: 28px;
          padding: 0 4px;
          height: 27px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(224, 227, 237);
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          font-size: 14px;
        }
      }
<a href="#" class="cart-container">
  <div class="cart-image">
   <i class="shopping-basket-icon"></i>
  </div>
  <div class="cart-counter">123</div>
</a>

I was thinking about text-overflow to ellipsis with nowrap.

Here is the problem, it should expand to the right

Solution

  • Here's the solution.

    The problem was that you were using the attribute right on the .cart-counter class, that makes the content to grow from the right to the left. You needed to make it backward, from left to right.

    Now, the next time please provide the code correctly, I had to figure out which icon library you were using for that shopping cart icon (FontAwesome) and some missing divs on the HTML.

    Now here's the HTML and the CSS (feel free to set up to SCSS).

    HTML:

    <div class="cart-box">
  <a href="#" class="cart-container">
    <div class="cart-image">
      <i class="fas fa-shopping-basket"></i>
      <div class="cart-counter">123</div>
    </div>
  </a>
</div>

    CSS:

    .cart-box {
  display: inline-block;
  position: relative;
  background: #723636;
  padding: 15px;
}

.cart-image {
  width: 55px;
  height: 50px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #D58E32;
  position: relative;
}

i {
  margin-right: 5px;
  color: white;
}

.cart-counter {
  padding: 0 4px;
  height: 37px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(224, 227, 237);
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(0%, -50%);
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}