Question 213018 in CSS Question posted in
Some basic documentation can be found here.

Css – Align heading with profile image and profile description

.main_content_box{
  height: 58px;
  background-color: #CEE0F9;
  border-radius: 25px 25px 30px 30px;
  text-align: center;
  font-size: 19px;
}
<div class="main_content_box">
  <div class="icon">
    {{ P }}
  </div>
  <span style="margin-left:-30px">  {{ Name }} </span>
  <div style="text-transform:capitalize;font-size: 14px; text-align: center;margin-left:-30px"> Profile Description </div>
</div>

i want to set it like this

enter image description here

Tags:

2

Answers


  1. 0 
    .main_content_box{
  height: 58px;
  background-color: #CEE0F9;
  border-radius: 25px 25px 30px 30px;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.icon{
  padding: 1rem;
}
    <div class="main_content_box">
  <div class="icon">
    {{ P }}
  </div>
  <div><span>  {{ Name }} </span>
  <div> Profile Description </div></div>
</div>

    you have to use flexbox or grid system whenever you want to achieve something like this…

    Login or Signup to reply.
  2. 0

    ^Omar is correct in that you should use flex/grid for something like this.

    I gave you enough to get you started, but I’d recommend going to Youtube (or whatever form of learning you like) and watching a video on flexbox like this one.

    Following along with the video you can start to create your own flexbox cheat sheet. After creating the cheat sheet from following the video you can erase everything and build from scratch…practice makes perfect. Good luck!

    .main_content_box{
    display: flex;
    height: 400px;
    width: 300px;
    background-color: #fff;
    border: 2px solid black;
    border-radius: 6px;
}

.info-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: rgb(0, 150, 253);
    border-bottom: 2px solid black;
    border-radius: 4px;
    height: 70px;
    width: 100%;
    padding: 15px;
}

.description {
    margin-left: 5px;
    font-size: 20px;
    font-weight: 900;
}

.icon {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #000;
    background-color: #fff;
}
    <div class="main_content_box">
    <div class="info-section">
        <div class="icon"></div>
        <div class="description">
            <span>Name</span>
            <div>Profile Description</div>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search