Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

product-preview-card-component

@JalenDmarion25

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Was a fun little project to work if theirs any advice on anything I could do better I'd greatly appreciate it.

Community feedback

lrobb95 200

@lrobb95

Posted

Hello Jalen!

Love the project and congratulations on completing the challenge! I noticed that the .original class you have has each number/symbol crossed off.

One thing I would recommend on preventing the breaks on the striked portions is to use the HTML <s> to make the whole price crossed off with one line. It should look like this:

<s>$169.99</s>

The next thing I would recommend is to utilize the flex property on your button to center the text and the svg image both vertically and horizontally. This can be done by doing this:

.btn {
display: flex;
align-items: center;
justify-content: center;
}

Then to get some nice spacing between the icon and the text, throw in the gap property on your button. For instance - gap: 1rem;

Let me know if this helps!

0

lrobb95 200

@lrobb95

Posted

My fault! I just realized that you did put the align-items and justify-content on your button, however all you missed was the display: flex part!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord