Display cards on same row

user_17357715 0
Viewed 579

I managed to create a card exactly how i wanted, but when trying to put multiple of them, they go below each other, instead of at the side.

I tried using different displays (on CSS), but if I do that, they don't go to the center.

.main {
  height: 125vh;
  background: #141414;
  width: 100%;
  padding-left: 35px;
}

.card {
  margin: 100px auto 0;
  display: inline-block;
  width: 400px;
  height: 600px;
  perspective: 700px;
  align-items: center;
}
<div class="main">

  <div class="card">
    <div class="card-inner">

      <div class="card-face card-face-front">
        <h2>ProObra</h2>
      </div>

      <div class="card-face card-face-back">
        <div class="card-content">
          <div class="card-header">
            <img src="https://via.placeholder.com/50" class="card-image" />
            <h2>ProObra</h2>
          </div>
          <div class="card-body">
            <h3>Sistema para construtoras</h3>
            <p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>

css html
2 Answers

Your .card elements are div html tags. These are display: block by default, meaning they will not go inline because they take up the whole width of the container.

To make them go inline, I would recommend using flexbox on the parent element (I assume .main), although there are many approaches:

.main {
    height: 125vh;
    background: #141414;
    width: 100%;
    padding-left: 35px;
    display: flex;
}

To get the behavior with wrapping/overflow that you want, you will want to research flex properties to get the desired result.

user_132223590

The fastes way to do that with your code is to add in your main class display:flex;

.main {
  height: 125vh;
  width: 100%;
  padding-left: 35px;
  display: flex;
}

.card {
  margin: 100px auto 0;
  display: inline-block;
  width: 400px;
  height: 600px;
  perspective: 700px;
  align-items: center;
}
<div class="main">

  <div class="card">
    <div class="card-inner">

      <div class="card-face card-face-front">
        <h2>ProObra</h2>
      </div>

      <div class="card-face card-face-back">
        <div class="card-content">
          <div class="card-header">
            <img src="https://via.placeholder.com/50" class="card-image" />
            <h2>ProObra</h2>
          </div>
          <div class="card-body">
            <h3>Sistema para construtoras</h3>
            <p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  <div class="card">
    <div class="card-inner">

      <div class="card-face card-face-front">
        <h2>ProObra</h2>
      </div>

      <div class="card-face card-face-back">
        <div class="card-content">
          <div class="card-header">
            <img src="https://via.placeholder.com/50" class="card-image" />
            <h2>ProObra</h2>
          </div>
          <div class="card-body">
            <h3>Sistema para construtoras</h3>
            <p>Encontre no ProObra um sistema de gerenciamento de empresas da construção civil fácil de usar, completo e integrado. É uma ferramenta a sua disposição para melhorar o gerenciamento da sua empresa.
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
  
  
</div>

user_148071110
Related