recipe-card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted about 2 months ago

  Congratulations on completing this challenge! The desktop and mobile versions look great, and you solved the real challenge, which was to color the list markers. Many people who attempt this challenge ignore this detail entirely. Your solution is unique to say the least.

  That said, there is an easier way: use the CSS ::marker pseudo-element. This pseudo-element allows you to style the bullets and decimals in front of each list item in a list. This article explains how to use it.

  So, for example, if you remove the <p class="scale">&bull;</p> and <p>1.</p> elements and change the instructions list to an <ol>, you could save yourself a dozen lines of code by using:

        /* for list styling */
        .preparation li::marker {color: var(--accent-color-rose);}
        .ingredients li::marker, ol li::marker {
          color: var(--accent-color-brown);
          font-weight: bold;
        }
  

  Hope this helps.

  Marked as helpful

  1

  ---

  

  devkhrmnturk•60

  @devkhrmnturkPosted about 2 months ago

  @beowulf1958 Thank you for your time and feedback, I will play around with it more to keep it simple as you mentioned.

  0