New responsive nutrition label venting

In the nutrition label project, you’re directed to make the body of the nutrition label, and in step 46, you make a CSS property

.daily-value p {
  border-bottom: 1px solid #888989;
}

To more efficiently list the values and apply a divider.

Later, we need to indent the specific values, but the lesson tells you to make a class.

.indent {
    margin-left: 1em;
}

This then presents the problem of the previous bottom border no longer reaching the left side of the label. And the lesson addresses that by making a .no-divider class to remove the label and has you make a divider yourself with
<div class="divider"</div>
Naturally, I thought this was kind of dumb, so instead, I propose that the lesson should go into letting the student try to use information from past lessons to problem solve.

I thought of instead changing the .indent class to change the padding.

.indent {
  padding-left: 1em;
}

then removing all the <div class="divider></div> and .no-divider, since it’s not needed.

Edit: I know that changing this like so would leave the “% Daily Value *” hanging with only a partial border; I fixed it by applying a style to the <p> element of “width: 100%; text-align: right;” and, leaving the “right” in the class because removing it would cause more issues.

if you would like to propose changes to the practice projects, the best place would be the github repo

1 Like