Learn Typography by Building a Nutrition Label - Step 28

Tell us what’s happening:
Describe your issue in detail here.
Hi there! It’s not a real issue just a question because of better understanding. I solved that task so far BUT I don’t understand why on the CSS sheet I just set selector .lg and not .divider lg AND where does this .md come from there is no tag with a class of md anywhere! Would be great if anyone can explain that to me! Thanks a lot!

  **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>
<body>
  <div class="label">
    <header>
      <h1 class="bold">Nutrition Facts</h1>
      <div class="divider"></div>
      <p>8 servings per container</p>
      <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
    </header>
    <div class="divider lg"></div>
  </div>
</body>
</html>
/* file: styles.css */
* {
box-sizing: border-box;
}

html {
font-size: 16px;
}

body {
font-family: 'Open Sans', sans-serif;
}

.label {
border: 2px solid black;
width: 270px;
margin: 20px auto;
padding: 0 7px;
}

header h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}

p {
margin: 0;
}

.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
}

.bold {
font-weight: 800;
}

.right {
float: right;
}

.lg {
height: 10px;
}

.lg, .md {
background-color: black;
border: 0;

}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:103.0) Gecko/20100101 Firefox/103.0

Challenge: Learn Typography by Building a Nutrition Label - Step 28

Link to the challenge:

the .md thing it looks like a bug…
You can probably check the source repository for the freecodecamp to see if it has been reported as such or not.

as for the question about .lg, well css doesn’t force you to use all the classes. You can just use one relevant one and in this case lg is unique to that div so it works to tell the browser that you are targeting that specific element.
Here’s a CSS Selectors reference if you want to learn more.

Thanks a lot for information and help. I have to report that .md issue

Thank you for that link too!!! I want to learn everything of it and really enjoy learning that stuff. Huge thanks to freecodecamp for giving everybody that possibility!

Best regards

Yadobono

1 Like