Question 43167 in Html Question posted in
Some basic documentation can be found here.

How to make make div stay the same size regardless of text length – Html

I have this code that renders an application

      <div class="applications">
         <!-- 
        <div>
          <h3>Applications</h3>
          <% applicants.forEach(function(applicant){ %>

          <div class="application">
            <div class="user-info">
              <div class="user-avatar">
                <img src="/images/avatar2.jpg" alt="applicant avatar" />
              </div>
              <h4 class="applicant-name"><%= applicant.username%></h4>
              <p class="application-time">Applied <%= getTimePassed(applicant.dateposted)%></p>
              <div style="margin-left:auto;display:flex;gap:8px;">
                <div class="button accept">Accept</div>
                <div class="button reject">Reject</div>
                <a href="#">
                  <div class="mini-button"><img src="/images/rep.svg" alt="report" /></div>
                </a>
              </div>
            </div>
            <p class="application-text">
<              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis
              aute irure dolor in reprehenderit in voluptate velit esse cillum
              dolore eu fugiat nulla pariatur.
>            </p>
            <div class="socials">
              <a href="/profile/<%=applicant.username%>" target="_blank">
                <div class="social-icon">
                  <img src="/images/website.svg" alt="website">
                  <p>View Profile/Portfolio</p>
                </div>
              </a>
              <!---    <a href="#">
                <div class="social-icon">
                  <img src="/images/discord.svg" alt="discord">
                  <p>Discord</p>
                </div>
              </a>
              <a href="#">
                <div class="social-icon">
                  <img src="/images/github.svg" alt="github">
                  <p>Github</p>
                </div>
              </a>
            -->
            </div>
          </div>
          <% }); %>

        </div>
      </div>

However, if the application-text value is long, it expands the box and removes the responsiveness like this. enter image description here

Also, if the application-text value is lower, then it shortens the box and looks like this
enter image description here

I want the div to stay the same length and be responsive and to look like this, regardless of the text size.
enter image description here

Here is the current CSS for the applications section and each application element

      .application {
        padding: 10px !important;
      }

      .applications {
        padding: 0px 10px !important;
      }
    .applications {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 40px;
      padding: 0 2rem;
    }

    .applications>div {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .applications>div h3 {
      text-align: center;
      font-size: 28px;
    }

    .application {
      position: relative;
      display: flex;
      flex-direction: column;
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      padding: 2.4rem 3.2rem;
    }

    .user-info .application-time {
      color: #757575;
      font-size: 14px;
    }

    .user-avatar img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .application-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

How do I keep the application div to the proper size regardless of the application-text length?

Tags:

2

Answers


  1. 0

    You can try this word-wrap: break-word; in the css div application-text like this:

    .application-text { 
word-wrap: break-word;
}
    Login or Signup to reply.
  2. 0

    Something like this?

    .card {
    display: flex;
    flex-flow: column;
    gap: 20px;
    width: 80%;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 1rem;
    word-break: break-word;
}
    <div class="card">
    <header>Header</header>
    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque perferendis cumque dolore quos iusto necessitatibus repellendus modi harum vero numquam vel eius dolores nemo ipsam, ipsum debitis suscipit voluptates rerum accusantium ut cupiditate minus. Rem, sint, assumenda eatae accusamus porro quas quisquam cupiditate aperiam impedit exercitationem quos, consequatur sapiente amet quod similique commodi explicabo maiores ugiat repellendus. Animi iusto labore magni voluptatibus a, id delectus numquam nobis fuga deleniti inventore, quod sint sit. Velit harum cumque asperiores fugiat earum qui possimus, modi itaque maiores dolorem facilis. Odio dolorem in dolores! Dolor a accusamus iure quam sed dignissimos ipsa aliquam alias.</span>
    <footer>Footer</footer>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search