Build a Page of Playing Cards - Build a Page of Playing Cards

HTML-CSS
1

Tell us what’s happening:

The spacing of the middle symbol on the 5 of Diamonds is different between the top and bottom pair of symbols. How do I make those two spaces the same?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Playing Cards</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <main id="playing-cards">
    <!-- Card 1 -->
    <div class="card">
      <div class="left">
        <div>2</div>
        <div>♠</div>
      </div>
      <div class="middle">
        <div>♠</div>
        <br>
        <div class="flipped">♠</div>
      </div>
      <div class="right">
        <div class="flipped">♠</div>
        <div class="flipped">2</div>
      </div>
    </div>
    <!-- Card 2 -->
    <div class="card red">
      <div class="left">
        <div>A</div>
        <div>♥</div>
      </div>
      <div class="middle">
        <div>♥</div>
      </div>
      <div class="right">
        <div class="flipped">♥</div>
        <div class="flipped">A</div>
      </div>
    </div>
    <!-- Card 3 -->
    <div class="card">
      <div class="left">
        <div>7</div>
        <div>♣</div>
      </div>
      <div class="middle">
        <div class="high-number">
        <div>♣ ♣</div>
        <div>♣</div>
        <div>♣ ♣</div>
        <br>
        <div class="flipped">♣ ♣</div>
        </div>
      </div>
      <div class="right">
        <div class="flipped">♣</div>
        <div class="flipped">7</div>
      </div>
    </div>
    <!-- Card 4 -->
    <div class="card red">
      <div class="left">
        <div>5</div>
        <div>♦</div>
      </div>
      <div class="middle">
        <div>♦ ♦</div>
        <div>♦</div>
        <div class="flipped">♦ ♦</div>
      </div>
      <div class="right">
        <div class="flipped">♦</div>
        <div class="flipped">5</div>
      </div>
    </div>
    <!-- Card 5 -->
    <div class="card red">
      <div class="left">
        <div>2</div>
        <div>♥</div>
      </div>
      <div class="middle">
        <div>♥</div>
        <br>
        <div class="flipped">♥</div>
      </div>
      <div class="right">
        <div class="flipped">♥</div>
        <div class="flipped">2</div>
      </div>
    </div>
  </main>
</body>
</html>


/* file: styles.css */
body {
  background-color: burlywood;
}

#playing-cards {
  display:flex;
  justify-content:center;
  margin-top:30px;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  display: flex;
  background-color:#ff3333;
  justify-content: space-between;
  height: 350px;
  width: 250px;
  border: 1px solid black;
  border-radius: 10px;
  font-size: 25px;
  padding:5px;
  box-sizing:border-box;
  font-family: impact;
  box-shadow:2px 2px 5px black;
  text-align:center;
}

.left{
  align-self: flex-start;
}

.middle{
  align-self:center;
  font-size: 70px;
  display:flex;
  flex-direction:column;
  justify-content: space-between;
}

.right{
  align-self:flex-end;
}

.flipped{
  transform:rotate(180deg);
}

.high-number{
  line-height: 45px;
}

.red{
  color:#ff3333;
  background-color:black;
}

.card:hover{
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.3);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Page of Playing Cards - Build a Page of Playing Cards
https://www.freecodecamp.org/learn/full-stack-developer/lab-page-of-playing-cards/build-a-page-of-playing-cards

2

Try removing the flipped class.

3

Thank you! That worked for the diamond since they look the same either way (flipped or standard), but when I swapped the symbol to clubs the spacing was wonky again. The best solution I could think of was adding an .adjust div with transform: translatey(15px) to manually move it. If there is a better way to resolve it, I would definitely apreciate some recommendations.