Kevin Powell - Community•2y ago

Can somebody create this for me in responsive way, i've tried but i couldn't do it

12 Replies

b1mind•2y ago

Share what you have tried in a codepen so we can help you learn.

samidevOP•2y ago

yep ofc want me to send the file so u can see it better i tried to create it but it is not responsive

samidevOP•2y ago

https://codepen.io/ssamimustafa/pen/YzOZQma

Sami

CodePen

YzOZQma

...

samidevOP•2y ago

here it is just send the code u changed and that's all

Myndi•2y ago

<section class="people">
    <div class="user">
      <i class="fas fa-user"></i>
      <div>
        <h3>90+</h3>
        <p>Users</p>
      </div>
    </div>

    <div class="location">
      <i class="fas fa-location-dot"></i>
      <div>
        <h3>30+</h3>
        <p>Locations</p>
      </div>
    </div>

    <div class="server">
      <i class="fas fa-server"></i>
      <div>
        <h3>50+</h3>
        <p>Servers</p>
      </div>
    </div>
</section>

<section class="people">
    <div class="user">
      <i class="fas fa-user"></i>
      <div>
        <h3>90+</h3>
        <p>Users</p>
      </div>
    </div>

    <div class="location">
      <i class="fas fa-location-dot"></i>
      <div>
        <h3>30+</h3>
        <p>Locations</p>
      </div>
    </div>

    <div class="server">
      <i class="fas fa-server"></i>
      <div>
        <h3>50+</h3>
        <p>Servers</p>
      </div>
    </div>
</section>

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.people > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.people > div h3 {
  font-size: 1.5rem;
}

.people > div > div {
  width: 5rem;
}

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.people > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.people > div h3 {
  font-size: 1.5rem;
}

.people > div > div {
  width: 5rem;
}

https://codepen.io/myntsu/pen/qBMrXXo There you have it edited, make sure to fork it or save it! You add the style to it. But I simplified it ^_^ As a recommendation, take a look into how to structure layouts, and avoid the use of position: absolute and pixel perfection. Flex and grid do a lot out of the box to make stuff responsive, and you can compliment it with media queries if needed thumbsUP

samidevOP•2y ago

ye thanks mate btw how to add these | in the middle

samidevOP•2y ago

samidevOP•2y ago

how to place this in the middle

harsh•2y ago

try doing

margin-right auto

margin-right auto

and

margin-left auto

margin-left auto

these arrows represent direct children, right ?

rishit•2y ago

yh nd u shud use

margin-inline:auto;

margin-inline:auto;

instead

Myndi•2y ago

Yes.

harsh•2y ago

smart

Gaming

Programming

Can somebody create this for me in responsive way, i've tried but i couldn't do it