HTML and CSS responsive layout-CodePudding

I want to make responsive layout. But I am doing something wrong.This is how I want to make my layout to look like ....................................................................................................................................................................

.row_4{
    background-color:#F9F8FD;
    height: 14.87%;
    width: 100%;
    display: flex;
    flex-flow: row; 
    justify-content: space-between;
    

}

.info{
    margin-left: 4.83%;
    margin-top: 2.9%;
    float: left;
}

.action{
    display: flex;
    flex-flow: row;
    margin-right: 3%;

}

<div  id="rapper_1">
                <div >
                    <img src="profile_pics/eminem.jpg" alt="Eminem">
                </div>
                <div >
                    <div >
                        Eminem
                    </div>
                    <div >
                        7867598568
                    </div>
                    <div >
                        RAPGOD
                    </div>

                </div>
                <div >
                    <div >
                        <i id="sms_logo" ></i>
                    </div>
                    <div >
                        <i id="phone_logo" ></i>
                    </div>
                </div>
[

>

][1]
            </div>



> I want to make responsive layout. But I am doing something wrong.

I never suggest using margin and % for centering stuff,
just flexbox, with their properties like justify and align

* {
  /* this is important so image don't go outside the card div after writing 100% with padding */
  box-sizing: border-box;
}

.row_4 {
  display: flex;
  background-color: #f9f8fd;
  /* with this type of card, normally we try to make them responsive by width, not height. so is good having a static value here */
  /* the card is 10rem (since I counted that you are using 15%, and my screen is 999px so 15% of 999px is 150px, that translate to 10rem (1rem = 16px)  */
  height: 10rem;
  border-radius: 1rem;
}

.pfp img {
  /* this 100% will only work if you added on the top box-sizing */
  /* because the height then it will be (10rem - (0.5rem * 2))  */
  height: 100%;
  padding: 0.5rem;
  border-radius: 1rem;
}

.info {
  display: flex;
  /* this make them like grid behaviur, but in flexbox */
  flex-direction: column;
  /* in the html a wrapped the first two elements in one div, so this will work */
  justify-content: space-between;
  padding: 1rem 0.5rem;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  /* so the .action can have all the width that remains, to can be centered responsivelly */
  flex: 1;
  gap: 1rem;
  color: orange;
}


/* not important this next lines, just styling */

.info .name {
  font-size: 2rem;
  font-weight: 800;
}

.info .number {
  opacity: 0.5;
}


/* .row_4 > * {
  border: 1px dashed red;
} */

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div  id="rapper_1">
    <!-- 1 -->
    <div >
      <img src="https://picsum.photos/200" alt="Eminem" />
    </div>

    <!-- 2 -->
    <div >
      <!-- here I changed some stuff -->
      <!-- basically I wrapped the first two element inside one, so we can add a space-between successfully -->
      <div>
        <div >Eminem</div>
        <div >7867598568</div>
      </div>
      <div >RAPGOD</div>
    </div>

    <!-- 3 -->
    <div >
      <div >
        <i id="sms_logo" ></i>
      </div>
      <div >
        <i id="phone_logo" ></i>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: black;
  /* ^^^ for demo purposes. because putting white on white is dumb */
}

.profile {
  display: flex;
  background: white;
  padding: 0.25em;
  border-radius: 10px;
  justify-content: space-between;
  max-width: 80%;
  margin: 0 auto;
}

.profile__wrapper {
  display: flex;
  gap: .675em;
}

.profile__image {
  background-size: cover;
  aspect-ratio: 1;
  width: 80px;
  border-radius: 10px;
}

.profile__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-block: .5em .25em;
}

.profile__name {
  font-family: sans-serif;
  color: hsl(0 0% 50%);
  font-weight: 700;
}

.profile__number {
  color: hsl(220 100% 50%);
  font-size: .8rem;
}

.profile__msg>svg {
  width: 1.5rem;
  color: orange
}

.profile__call>svg {
  width: 2rem;
  color: orange;
}

.profile__buttons {
  margin: auto 0;
  margin-right: 1.5em;
  display: flex;
  gap: 1em;
  
  justify-content: center;
  align-items: center;
}

<div >
  <div >
    <div  style="background-image: url('https://randomuser.me/api/portraits/men/83.jpg')"></div>
    <div >
      <div >
        <div >Uncle Joe</div>
        <div >123456</div>
      </div>
      <div >Broseph</div>
    </div>
  </div>
  <div >
    <div >
      <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs><style>.cls-1{fill: CurrentColor;}</style></defs><path  d="M448,76.56A38.44,38.44,0,0,1,486.4,115v230.4a38.44,38.44,0,0,1-38.4,38.4H66.2l-7.5,7.5-33.1,33.1V115A38.44,38.44,0,0,1,64,76.56H448M448,51H64A64,64,0,0,0,0,115V443.21A17.78,17.78,0,0,0,17.92,461a17.42,17.42,0,0,0,12.45-5.25L76.8,409.36H448a64,64,0,0,0,64-64V115a64,64,0,0,0-64-64Z"/><path  d="M332.8,191.76H179.2a12.8,12.8,0,0,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path  d="M332.8,243H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,1,1,0,25.6Z"/><path  d="M332.8,294.16H179.2a12.8,12.8,0,1,1,0-25.6H332.8a12.8,12.8,0,0,1,0,25.6Z"/></svg>
    </div>
    <div >
      <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 512 512"><defs>
    <style xmlns="http://www.w3.org/2000/svg">
        .svg__phone__call1 {
            transform: rotate(-45deg);
            transform-origin: center center
        }
    </style>
</defs><path xmlns="http://www.w3.org/2000/svg"  d="M258.7,80.74,236.91,101.4c-74.85,72.75-64.43,247,0,309.87l21.79,20.66c5.68,5.39,15.16,5.39,21.79,0l42.64-41.32a14.64,14.64,0,0,0,0-20.66L276.7,324.15l-50.22,3.59c-15.16-14.37-15.16-129.34,0-143.71l52.11,2.69,44.53-44a14.64,14.64,0,0,0,0-20.66L280.49,80.74C273.86,74.46,264.39,74.46,258.7,80.74Z" fill="CurrentColor"/></svg>
    </div>
  </div>