Design a Feature Selection Page - Tests passed, weird behavior

Curriculum Help
,
1

Tell us what’s happening:

Why are my cards jumping around when the checkbox is selected? I think it has something to do with the height pushing them on to separate lines, but I can’t figure out how to stop it.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheets" href="styles.css">
</head>

<body>
    <div class="feature-card-container">
        <h1>Feature Selection</h1>
        <label class="feature-card">
            Feature 1
            <br>
            <input type="checkbox">
            </label>
        <label class="feature-card">
            Feature 2
            <br>
            <input type="checkbox">
            </label>
        <label class="feature-card">
            Feature 3
            <br>
            <input type="checkbox">
            </label>
        <label class="feature-card">
            Feature 4
            <br>
            <input type="checkbox">
            </label>
        </div>

</body>

</html>

/* file: styles.css */
body, html {
  height: 100%;
  background: linear-gradient( #b8860b,#e1a50d,#f0bd32) no-repeat;
}

.feature-card-container {
  background-color: #f5f5f5;
  width: 80vw;
  margin: 25px auto;
  padding: 25px;
  border-radius: 7px;
  text-align: center;
}

h1 {
  font-family: Courier new;
  font-weight: bold;
}

label {
  display: inline-block;
  background-color: #fff5ee;
  border: 2px solid #faf0e6;
  border-radius: 10px;
  height: 75px;
  width: 150px;
  text-align: center;
  font-family: courier new;
font-weight: bold;
font-size: 16pt;
padding: 10px 0 0 10px;
margin: 0 auto 10px;
}

input[type="checkbox"] {
  appearance: none;
  margin: 10px auto;
  height: 20px;
  width: 20px;
  border: 2px solid #e1a50d;
  background-color: #f5f5f5;
  border-radius: 2px;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  border-color: #191970;
  background-color: #f0bd32;
}

input[type="checkbox"]:checked::after {
  text-align: center;
  font-weight: bold;
  content: "✓";
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:152.0) Gecko/20100101 Firefox/152.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @concertinacomputer

The shift occurs when the checkbox input element is selected.

Try commenting out each property in the following selector:

Happy coding

3

Thanks! I do understand it’s the checkmark that’s making it move, but I don’t understand why. I initially thought maybe the line height was too tall, so I changed that, but same issue.

4

Selecting the checkbox is adding the ✓ content to the input element. This is causing a recalculation of the styles, so the parent element makes an adjustment.