Responsive Product Preview Card Using Flexbox

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  Great job finishing this challenge. For the most part, it looks pretty good. However, I noticed that the desktop version has an issue with the discounted price and original price being on two separate lines. I also noticed that you have two h1 in a single component, which is not a good practice: every page should have one and only h1. This is because h1, h2, etc are structural tags (and have a semantic meaning), and they should not be used for styling (which is what CSS is for.) A quick fix would be to change <h1>$149</h1> to a <p> tag with a class, such as "discount".

  <p class="discount">$149.99</p>
  

        .text .price .discount,
        .text .price p {
          flex: 1 1 50%;
        }
  
        .text .price .discount {
          color: var(--Darkcyan);
          font-family: "Fraunces";
          font-size: 1.75em;
          font-weight: bold;
          text-decoration: none;
        }
  

  Hope this helps! And keep on coding.

  Marked as helpful

  0

  ---

  

  REXX•110

  @yorisePosted 5 months ago

  thank you for your efforts in looking at my code and giving feedback, I will keep that semantic meaning in my mind for the next time. 😆👀👀@beowulf1958

  0