Step:27 Learn typography by building a nutrition label

HTML-CSS
1

I am not sure why the dimensions are changing on the bottom line in the preview when there is no class of .large and .medium on the HTML code. Can someone please let me know what I am missing out on?

2

Need to see the code please. HTML and CSS

3

Can you send your code and link to the challenge, please?

4

If you have a question about a specific challenge as it relates to your written code for that challenge, and you’ve tried to solve it at least 3 times so far and still need some help, just click the Ask for Help button located on the challenge (it looks like a question mark).
This button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

5

Here’s the link:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-27

and the HTML code

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

(*it does not have the .large .medium class but changes are still happening in the preview)

6

Here’s the link:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-typography-by-building-a-nutrition-label/step-27

and the HTML code

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

(*it does not have the .large .medium class but changes are still happening in the preview)

CSS code

  • {
    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;
display: flex;
justify-content: space-between;
}

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

.bold {
font-weight: 800;
}

.large{height:10px;
}
.large,.medium{background-color:black;}

7

@Dgemmell82 please ignore the Nutrition facts part

Here’s the HTML code

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

8

Looks like your css code needs some spacing.

Try a space after your selector, after your
{ and before your rules Also need spaces after multiple selectors.
As in
Body, html, .classes {
Property: value; } note the spacing