How can i make this text responsive? in tailwind css

Royal Adish 0
Viewed 20

how to hide or make that overflow hidden

THE MOTIVATION FROM OUR CUSTOMERS "Happiness is a by-product of an effort to make someone else happy." 
    <div class="sm:grid sm:grid-cols-3 gap-4 mt-5">
         <div class="mt-5">
            <!-- <img src="image/review.png" alt="" class=""> -->
            <div class="bg-slate-200 w-full max-h-48 sm:max-h-64 p-4 grid grid-rows-2">

                    <div class="flex gap-5">
                            <div class="">
                                <div class="bg-black h-16 w-16"></div>
                            </div>
                            <div class="-space-y-1">
                                <p class="text-lg font-bold">Adish Dahal</p>
                                <p class="text-xl font-bold">
                                    <iconify-icon icon="emojione:star"></iconify-icon>
                                    <iconify-icon icon="emojione:star"></iconify-icon>
                                    <iconify-icon icon="emojione:star"></iconify-icon>
                                    <iconify-icon icon="emojione:star"></iconify-icon>
                                    <iconify-icon icon="emojione:star"></iconify-icon>
                                </p>
                                <p class="text-sm font-light">2078-05-06</p>

                            </div>
                    </div>

                    <div class="">
                        <p class="text-justify">
                            In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content <a href="#" class="text-blue-500">read more</a>
                        </p>
                    </div>
            </div>
         </div>

         
    </div>
</div>
tailwind-css
2 Answers

You can hide/make the overflow hidden by applying the overflow-hidden utility.

The tailwind documentation got all the possible options with many examples; you should look at docs.

Tailwind-play.

It's not completely clear what you mean by saying you want it to be responsive, but if you wish for the text's container to change its height depending on your text's length, you need to get rid of max-h-48 sm:max-h-64 utilities.

ChenBr0 

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<html>

</html>

<body>
  <div class="sm:grid sm:grid-cols-3 gap-4 mt-5">
    <div class="mt-5">
      <!-- <img src="image/review.png" alt="" class=""> -->
      <div class="bg-slate-200 w-full min-h-48 p-4">

        <div class="flex gap-5">
          <div class="">
            <div class="bg-black h-16 w-16"></div>
          </div>
          <div class="h-fit">
            <p class="text-lg font-bold">Adish Dahal</p>
            <p class="text-xl font-bold">
              <iconify-icon icon="emojione:star"></iconify-icon>
              <iconify-icon icon="emojione:star"></iconify-icon>
              <iconify-icon icon="emojione:star"></iconify-icon>
              <iconify-icon icon="emojione:star"></iconify-icon>
              <iconify-icon icon="emojione:star"></iconify-icon>
            </p>
            <p class="text-sm font-light">2078-05-06</p>

          </div>
        </div>

        <div class="">
          <p class="text-justify">
            In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content <a href="#" class="text-blue-500">read more</a>
          </p>
        </div>
      </div>
    </div>


  </div>
  </div>
</body>

</html>

changed max-h-48 to min-h-48, bcs if max the container will not resize to content fit. you can also use min-h-fit

Abdullah Alam0
Related