CSS/SASS: How to make text be at the center and adjustable to the card?

user_19070208 0
Viewed 37

This is my current card when there's many words

This is the card that I want when there's a few words but that About Me stays up on top

I have been doing trial and error for this card css design that I found on YouTube. My problem with this card is that if the characters is only a few letters it will look really weird because it's anchored to the top so there will be a huge white space at the bottom.

.container-profile-small {
  position: relative;
  width: 990px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 64px;
}

.price{
  padding-top: 90px;
}

.container-profile-small .card-profile-small {
  position: relative;
  width: 360px;
  height: 448px;
  background: #fff;
  margin: 0px;
  border-radius: 5px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);

  .content-profile-small{
    text-align: center;
    margin: auto;
    font-family: helvetica;
    height: 10em;
    position: relative;
    justify-content: center;
    align-items: middle;
    margin-top: 125px;
    height: auto;

    h4 {
      font-family: helvetica;
      font-weight: bold;
    }

    h5 {
      font-family: helvetica;
    }

    p {
      font-family: helvetica;
      color: #666;
      vertical-align: middle;
    }
  }
}


.container-profile-small .card-profile-small .gradient-small {
  position: relative;
  width: 100%;
  height: 100%;
  // background-image: linear-gradient(180deg, rgb(231, 139, 0) 0%, rgba(255,184,91,1) 28%);
  background-image: linear-gradient(180deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  clip-path: circle(200px at center 0);
  text-align: center;
  h1 {
   color: #fff;
   font-size: 32px;
   font-weight: bold;
   font-family: helvetica;
  }
  h2 {
  color: #fff;
  font-size: 24px;
  margin-top: -16px;
  font-family: helvetica;
  }
}

.profile-img-small {
  width: 10em;
  height: 10em;
  margin: -33em auto 0 11em;
  border-radius: 50%;
  background-image: linear-gradient(0deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  transform: translateX(-50%);
  img {
    width: 90%;
    height: 90%;
    border-radius: inherit;
  }
}
<div class="container-profile-small">
  <div class="card-profile-small">
    <div class="gradient-small">
        <h1>Lynwood</h1>
        <h2>Hungary</h2>
    </div>
    <div class="profile-img-small">
      <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cmFuZG9tJTIwcGVvcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="user">
    </div>
    <div class="content-profile-small">
      <h1>About Me:</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
    </div>
</div>
</div>

card sass components css
1 Answers

You can try adding display:flex to the div with the class content-profile-small. This are the codes that would center the text -

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

Also, you would need to specify a fixed height and margin.

This is the updated CSS code -

.container-profile-small {
  position: relative;
  width: 990px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 64px;
}

.price{
  padding-top: 90px;
}

.container-profile-small .card-profile-small {
  position: relative;
  width: 360px;
  height: 448px;
  background: #fff;
  margin: 0px;
  border-radius: 5px;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);

  .content-profile-small{
    text-align: center;
    margin: auto;
    font-family: helvetica;
    height: 10em;
    position: relative;
    margin-top: 120px;
    padding: 0 10px;
    height: 14.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    h4 {
      font-family: helvetica;
      font-weight: bold;
    }

    h5 {
      font-family: helvetica;
    }
    
    h1 {
      margin: 0;
    }

    p {
      font-family: helvetica;
      color: #666;
      vertical-align: middle;
    }
  }
}


.container-profile-small .card-profile-small .gradient-small {
  position: relative;
  width: 100%;
  height: 100%;
  // background-image: linear-gradient(180deg, rgb(231, 139, 0) 0%, rgba(255,184,91,1) 28%);
  background-image: linear-gradient(180deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  clip-path: circle(200px at center 0);
  text-align: center;
  h1 {
   color: #fff;
   font-size: 32px;
   font-weight: bold;
   font-family: helvetica;
  }
  h2 {
  color: #fff;
  font-size: 24px;
  margin-top: -16px;
  font-family: helvetica;
  }
}

.profile-img-small {
  width: 10em;
  height: 10em;
  margin: -33em auto 0 11em;
  border-radius: 50%;
  background-image: linear-gradient(0deg, rgb(244, 186, 112) 0%, rgb(231, 139, 0) 28%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
  transform: translateX(-50%);
  img {
    width: 90%;
    height: 90%;
    border-radius: inherit;
  }
}

user_104338400
Related