0

I have a card like component in my HTML that has text inside it. My problem is that when I resize the page, the card will get smaller but the text will overflow. I'm currently using Bootstrap 5 and it's h4 class like so:

   <div class="card bg-white">
           <div class="align-items-center d-flex justify-content-center my-3">
                <h1 class="text-primary bold">INFORMACIÓN</h1>
           </div>
   </div>

Here is a picture before the resize:

before

And here another after the resize, my actual problem:

enter image description here

Ana Cruz
  • 93
  • 7
  • Welcome to Stack Overflow! I think this question can help you: https://stackoverflow.com/questions/14537611/bootstrap-responsive-text-size. You can use viewport sizing or a media query. – Anvay Sep 01 '21 at 23:58
  • Maybe have a look at the accepted answer here: https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters – Adriano Sep 02 '21 at 00:00
  • i was looking for a solution using bootstrap, or at least one that still allowed me to use bootstrap's h1 class for consistency purposes. But i'll look into both links. Thanks! – Ana Cruz Sep 02 '21 at 02:00

1 Answers1

0

Resize the text inside h1 with vw (viewpost width).

Example -

100vw = width of your screen.

Just add a size of text using font-size : 2 vw;like this and use vw instead of pixels or em. Then text will be resized according to device/browser width.

Raushan Kumar
  • 56
  • 4