Need help with this. I can’t solve this

HTML-CSS
1 
<div class="daily-value small-text">
  <p class="bold right">% Daily Value *</p>
  <div class="divider"></div>
  <p class="no-divider"><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
  <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
</div>

IMG_0008
IMG_0008828×1792 148 KB

2

Please post a link to the Step. Thanks

3

Just add the no-divider class to those mentioned P elements.

1 Like
4

Hello. Tried that. Still receiving an error.

IMG_0012
IMG_00121792×828 171 KB

IMG_0013
IMG_0013828×1792 117 KB

5

Don’t remove the existing class; add a no-divider with them. You can set as many classes as you need.

6

Hi, you need to add the class no-divider to the class attribute of the same elements which hold % Daily Value * and Saturated Fat 1g. You need to add it after their existing classes in the class attribute. You have added it to some other paragraph which isn’t correct as per the instruction.

7

Please post your actual code instead of screenshots. Thanks

8

Hello. There is nothing that is working. I’m a little frustrated with this not passing. I swear this is right:

    <div class="no-divider">
      <p class="no-divider">% Daily Value *</p>
      <div class="no-divider"></div>
      <p class="no-divider"><span><span class="no-divider">Total Fat</span> 8g</span> <span class="no-divider">10%</span></p>
      <p class="no-divider">Saturated Fat 1g <span class="no-divider">5%</span></p>
    </div>
10

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

11

Hey man, I am sorry but it is not working because it is not passing. If you read your errors closely, you can see the problem it is telling you exactly what it is. You removed some of the original code, rather than adding to a class list you removed some classes and it is causing an error. Fixing one does uncover another. And then another. You have three errors I believe. I will provide more information soon.

12

Here is the original code. For readers, we are discussing Step 48 of the Nutrition Label Project of Responsive Web Design.

    <div class="daily-value small-text">
      <p class="bold right">% Daily Value *</p>
      <div class="divider"></div>
      <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
      <p class="indent">Saturated Fat 1g <span class="bold">5%</span></p>
    </div>

Below is the code that you have provided. Please read the error message closely.

Observe the second sentence of the error message below.

  1. Your p element with the text % Daily Value * should have no-divider added to the class attribute. Do not remove the existing classes.
  • Compare the original code and find the p element with the text % Daily Value * and add the classes that are in the original code but not yours.
  1. Doing this correctly will yield the same error.
  • You need to return the classes missing from the other <p> elements as well.
  • Pay attention the the class names as they are each different.
  1. Even after fixing this the code will not pass. This is because in your snippet of code you have removed the existing class list of daily-value and small-text and added no-divider. If you restore the parent <div> to it’s original class list it should pass after that. If you do this step first the errors will be more accurate.

Tip: It is often very useful to simply reset a lesson if you hit a wall because often times we make a mistake like this. Restoring to the original code to have a fresh take on the steps asked. Remember to follow directions step by step.

13

Ok. Thanks everyone for being patient with me.

14

Please do not remove the existing classes. Append a space followed by the no-divider class to the existing classes of the paragraphs.

17

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.