2

I am using bootstrap's "display-2" class, and I need to make the text responsive / smaller when I go in smaller devices.

Dramatically Engage

[The text looks like this[1]

Santes K
  • 63
  • 1
  • 7
  • Possible duplicate of [Pure CSS to make font-size responsive based on dynamic amount of characters](https://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters) – Nikita Kalugin Apr 13 '19 at 11:12
  • Welcome to Stack Overflow. Can you provide a [MCVE]? – aloisdg Apr 13 '19 at 11:13

2 Answers2

2

To make your text responsive you just have to use mediaquery in css file.

Media query is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

index.html

    <div>
      <h1 class="heading">Dramaticall Engage</h1>
    </div>

style.css

    .heading{
         font-size: 30px;
      }

    @media only screen and (max-width: 768px) {

      .heading{
        font-size: 20px;
      }
    }

    @media only screen and (max-width: 425px) {

      .heading{
        font-size: 14px;
      }
    }
Tahseen Quraishi
  • 1,353
  • 1
  • 14
  • 16
0

Use @media query for responsive size of fonts as per screen size and any content.

@media only screen and (max-width: 991px)
@media only screen and (max-width: 767px)
@media only screen and (max-width: 640px)
@media only screen and (max-width: 640px)
martin-martin
  • 3,274
  • 1
  • 33
  • 60
pankaj dudhattttt
  • 5
  • 1