CODEWITHSUNDEEP
htmlcss
Heljay
Heljay

Reputation: 13

How would i make cards go from left to right instead of vertically?

As the title suggest i want to make cards go from left to right instead of vertically i really dont know what to do and I have tried everything including float left

The code below is of one card. they are all the same with different text and here is a screenshot of what it looks like

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card {
  box-sizing: content-box
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}

.container {
  padding: 2px 16px;
}

.card {
  display: inline;
}

.card {
  float: inline-start;
}
<div class="card">
  <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
  <section id="text">
    <div class="container">
      <h4><b>New smash bros. game.</b></h4>
      <p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
  </section>
  </div>
</div>
</div>

Upvotes: 1

Views: 2454

Answers (2)

Jeremy Harris
Jeremy Harris

Reputation: 24549

Flex makes it very easy to do. Wrap it in a container and set the flex-direction to row.

.cards {
  display: flex;
  flex-direction: row;
}
.card {
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card {
  box-sizing: content-box;
  margin: 10px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.589);
}

.container {
  padding: 2px 16px;
}
<div class="cards">
  <div class="card">
    <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
    <section id="text">
      <div class="container">
        <h4><b>New smash bros. game.</b></h4>
        <p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
      </div>
    </section>
  </div>
  <div class="card">
    <img src="Smash.jpg" alt="Smash" style="height:256px;width:356px">
    <section id="text">
      <div class="container">
        <h4><b>New smash bros. game.</b></h4>
        <p>Is it better than smash 4 we definitely hope so<br> Are there now too many characters?</p>
      </div>
    </section>
  </div>
</div>

Upvotes: 2

Josef
Josef

Reputation: 91

wrap your cards in a div and set the div to

here is an example: 

.wrap {
  display: flex; 
   justify-content: space-between;`
   }
<div class="wrap">
  <div class="card">
    card content
  </div>
<div class="card">
    card content
  </div>
  <div class="card">
    card content
  </div>
 </div>

Upvotes: 0

Related Questions