HTML and CSS responsive layout

Question

I want to make a responsive layout. But I am doing something wrong. This is how I want to make my layout 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 class="row_4" id="rapper_1">
  <div class="pfp">
    <img src="profile_pics/eminem.jpg" alt="Eminem">
  </div>
  
  <div class="info">
    <div class="name">
      Eminem
    </div>
    <div class="number">
      7867598568
    </div>
    <div class="designation">
      RAPGOD
    </div>
  </div>
  
  <div class="action">
    <div class="message">
      <i id="sms_logo" class="fa fa-comment-dots"></i>
    </div>
    <div class="call">
      <i id="phone_logo" class="fa fa-phone"></i>
    </div>
  </div>
</div>

Laaouatni Anas · Accepted Answer · 2022-08-02 13:37:01Z

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 class="row_4" id="rapper_1">
    <!-- 1 -->
    <div class="pfp">
      <img src="https://picsum.photos/200" alt="Eminem" />
    </div>

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

    <!-- 3 -->
    <div class="action">
      <div class="message">
        <i id="sms_logo" class="fa fa-comment-dots"></i>
      </div>
      <div class="call">
        <i id="phone_logo" class="fa fa-phone"></i>
      </div>
    </div>
  </div>
</body>

developedbymark · Accepted Answer · 2022-08-04 12:59:09Z

*,
*::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 class="profile">
  <div class="profile__wrapper">
    <div class="profile__image" style="background-image: url('https://randomuser.me/api/portraits/men/83.jpg')"></div>
    <div class="profile__info">
      <div class="profile__info_wrapper">
        <div class="profile__name">Uncle Joe</div>
        <div class="profile__number">123456</div>
      </div>
      <div class="profile__nickname">Broseph</div>
    </div>
  </div>
  <div class="profile__buttons">
    <div class="profile__msg">
      <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 class="cls-1" 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 class="cls-1" 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 class="cls-1" 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 class="cls-1" 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 class="profile__call">
      <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" class="svg__phone__call1" 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>

In this answer I used a lot of flexbox tricks to create the layout.

let's break them down 1 by 1:

I wrapped the whole profile card with a div <div class="profile"></div>. If we look at its CSS, we can see that I put display: flex and justify-content: space-between. Flexbox puts the direct children on a horizontal line and space-between stores them like this: it takes all the available space at puts it between the flex items.
inside the profile div, we have 2 sections: profile-wrapper and profile-buttons. Let's start with profile-wrapper, it's a flex container with a gap, pretty basic. Now profile-buttons, it's a flex container with justify-content: center and align-items: center, they are both used to center the content of the flex container vertically and horizontally.
profile-image: it has background-size: cover. It's used to make the background shrink or grow to match the size of the element.
profile-info: it has display: flex combined with flex-direction: column to make the elements stackup vertically.
profile-info-wrapper: this div is just used to wrap the name and the phone number fields to make them act like one element. (check layout to understand the purpose).

FOR MORE INFO ON FLEXBOX LAYOUTS: Check MDN's docs

EXTRAS:

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
done! if there's anything that needs to be improved or removed from here, feel free to point it out or edit it directly

Collectives™ on Stack Overflow

HTML and CSS responsive layout

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related