I wanna shrink the text based on the container or wrapper height

Question

Hello so the text is overflowing when i change the window height it doesn't shrink or fit the container, Simply what i want to achieve is when the window height gets smaller the text goes up and fits to the container

If there's a way to do it with js sure thanks in advance.

/* Background && Wrapper */

#container {
  max-width: 1130px;
  height: 200vh;
  margin-left: auto;
  margin-right: auto;
  background-color: #000 !important;
  animation: gradient 90s linear 0s infinite;
  background-image: linear-gradient(rgba(245, 246, 252, 0.52), rgb(6 6 6)), url(images/background.png);
  border-radius: 5px;
}

<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.css" rel="stylesheet" />
<link rel="stylesheet" href="index.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.6.0/mdb.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

  <div id="container">
    <div class="container-xxl">
      <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">



          <h1 class="display-6 fs-5 text-warning">lorum</h1>


          <dl class="row text-center">
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 fw-bolder text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">Tlorum</dt>
            <dd class="col-sm-9 text-info text-break ">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 fw-bolder text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-danger">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 text-success">lorum</dd>
          </dl>

          <h1 class="display-6  fs-5 text-warning">lorum</h1>

          <dl class="row text-center">
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 fw-bolder text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum:</dt>
            <dd class="col-sm-9 text-danger text-break">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 fw-bolder text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info">lorum</dd>
            <dt class="col-sm-3 text-light">lorum</dt>
            <dd class="col-sm-9 text-info text-break">lorum</dd>
          </dl>




        </div>

It's working with width only when i change window width it scales properly

I'm not sure if it's not possible via css or not maybe what i am doing is just a mess

https://i.imgur.com/SwWXaUr.gif Heres what i mean by when changing the window height — xMidNight-., Sep 06 '21 at 05:57
You can use `@media screen and (max-height:750px){ }` on your CSS to make changes in the style depending on the height of the screen. So for example if `max-height:750px` then the style will be changed when the window height is `750px` or lower. You can add as many `@media` rules as you want. You can also set one at 450px like so: `@media screen and (max-height:450px){ }` — Gass, Sep 06 '21 at 06:50

I wanna shrink the text based on the container or wrapper height

0 Answers0