Hi, try this code: .collection-card .stripe a p { padding: 0; margin: 0; letter-spacing: .25rem; } Best, Marta

---

So this is the card set (code copied from your ecommerce collection) I'm basing my design on and the letter spacing makes the title to long and then it wraps. I have already worked out how to move the stripe down and reduce the padding of the stripe, but cannot work out how to take out the letter spacing.. Thanks so much :)    

<!-- Section: Products v.4 -->
<section class="text-center my-5">

  <!-- Section heading -->
  <h2 class="h1-responsive font-weight-bold text-center my-5">Our bestsellers</h2>
  <!-- Section description -->
  <p class="grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>

  <!-- Grid row -->
  <div class="row">

    <!-- Grid column -->
    <div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
      <!-- Collection card -->
      <div class="card collection-card z-depth-1-half">
        <!-- Card image -->
        <div class="view zoom">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/5.jpg" class="img-fluid" alt="">
          <div class="stripe dark">
            <a>
              <p>Red trousers
                <i class="fa fa-angle-right"></i>
              </p>
            </a>
          </div>
        </div>
        <!-- Card image -->
      </div>
      <!-- Collection card -->
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-3 col-md-6 mb-lg-0 mb-4">
      <!-- Collection card -->
      <div class="card collection-card z-depth-1-half">
        <!-- Card image -->
        <div class="view zoom">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/8.jpg" class="img-fluid" alt="">
          <div class="stripe light">
            <a>
              <p>Sweatshirt
                <i class="fa fa-angle-right"></i>
              </p>
            </a>
          </div>
        </div>
        <!-- Card image -->
      </div>
      <!-- Collection card -->
    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-3 col-md-6 mb-md-0 mb-4">
      <!-- Collection card -->
      <div class="card collection-card z-depth-1-half">
        <!-- Card image -->
        <div class="view zoom">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/9.jpg" class="img-fluid" alt="">
          <div class="stripe dark">
            <a>
              <p>Accessories
                <i class="fa fa-angle-right"></i>
              </p>
            </a>
          </div>
        </div>
        <!-- Card image -->
      </div>
      <!-- Collection card -->
    </div>
    <!-- Grid column -->

    <!-- Fourth column -->
    <div class="col-lg-3 col-md-6">
      <!-- Collection card -->
      <div class="card collection-card z-depth-1-half">
        <!-- Card image -->
        <div class="view zoom">
          <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/7.jpg" class="img-fluid" alt="">
          <div class="stripe light">
            <a>
              <p>Sweatshirt
                <i class="fa fa-angle-right"></i>
              </p>
            </a>
          </div>
        </div>
        <!-- Card image -->
      </div>
      <!-- Collection card -->
    </div>
    <!-- Fourth column -->

  </div>
  <!-- Grid row -->

</section>
<!-- Section: Products v.4 -->

---

Hi, could you paste here a link to the components you're talking about? Now I'm not sure. I'll try to help you. Best, Marta

---