How to achieve this responsiveness (im only asking about the circle users)?

userZPed1 0
Viewed 24

enter image description here

I want to achieve this responsiveness, I know how to make the horizontal and the vertical layout, my only concern is the 2 row layout one, first two elements in the first row and the 3rd element in the "middle" of the 2nd row, thats where im stuck with.

media-queries responsive-design sass css
3 Answers

Instead of flex like the other answer, I offer to use the well known text-align: center friend with display: inline-block.

.circle {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: yellow;
  margin: 10px;
  display: inline-block;
}

.container {
  width: 150px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}

.container.b {
  width: 120px;
}

.container.c {
  width: 240px;
}
<div class="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<div class="container b">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>


<div class="container c">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

IT goldman0

Flexbox can handle this reasonably well.

Html

<div class="container">
  <img src="https://picsum.photos/seed/picsum/200/200" />
  <img src="https://picsum.photos/seed/tech/200/200" />
  <img src="https://picsum.photos/seed/kids/200/200" />
</div>

CSS

.container {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

img {
  width: 100px;
  border-radius: 100px;
  margin: 20px 0;
}


.container {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  border: 1px solid red;
  animation: breathe 4s ease-in-out infinite alternate;
}

img {
  width: 100px;
  border-radius: 100px;
  margin: 20px;
}

@keyframes breathe {
 0% {
  width: 150px;
 }

 100% {
  width: 500px;
 }
}
<html>
 <body>    
    <div class="container">
      <img src="https://picsum.photos/seed/picsum/200/200" />
      <img src="https://picsum.photos/seed/tech/200/200" />
      <img src="https://picsum.photos/seed/kids/200/200" />
    </div>
  </body>
</html>

Then when your container expands, it will similarly shift your profile circles.

Example: https://codepen.io/iamredseal/pen/NWMxZKP

iamredseal0

I took a stab at this with some flexbox style; I put borders on just to show where things were. Display this full screen then zoom it bigger then try some shrink of the page/display to see when your outer container gets more narrow, the bottom wraps below, then the middle if you make it more narrow. Just add more block-person chunks to see this with more wrapping when you have many like 8 or 10;

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: solid 2px #4444aa;
}

.block-person {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: middle;
  margin: 1rem;
  border: 1px solid #88AAAA;
  padding: 0.25rem;
}

.circle {
  align-self: center;
  border: solid #ff8888;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 1rem;
  font-size: 2rem;
  width: 2.5em;
}

.person-name {
  font-size: 0.75em;
  margin: 0.5em;
}

.block-person {
  flex: 1;
}
<div class="container">
  <div class="block-person">
    <div class="circle">A</div>
    <span class="person-name">Apple</span>
  </div>
  <div class="block-person">
    <div class="circle">B</div>
    <span class="person-name">Barny Cow</span>
  </div>
  <div class="block-person">
    <div class="circle">C</div>
    <span class="person-name">Charlie Baker</span>
  </div>
</div>

Mark Schultheiss0
Related