Design comparison
Solution retrospective
Good day, i had some few challenges with this project, which i was still not able to resolve as at when submitting this project.
- I found it difficult aligning the Bigger texts with out it shifting to the extreme left on like the original document.
- I also found it quite difficult in adding a cross line on the original price of the item. How best can i resolve this two issues, Thanks
Community feedback
- @KTrick01Posted over 2 years ago
Hi! In your
.price2
class you can use the propertytext-decoration: line-through
to add the line on the old price, I hope that it helps you!Marked as helpful2@victorebegbunaPosted over 2 years ago@KTrick01 Thanks a lot. somehow I have been ignoring the text-decoration, never the solution was there.
0 - @prantiknoorPosted over 2 years ago
Hey @victorebegbuna. Congratulations! 🎉🎉 You have completed your first challenge though some improvements need.
First, you should center the card. You can easily center that:
body { min-height: 100vh; display: grid; place-content: center; }
Secondly, your card corner should be rounded. You can do that as below:
table { border-radius: 1rem; overflow: hidden; }
Question 1.
You can align the text as below:
.frame2 { color: black; text-align: left; padding-left: 16px; }
Question 2.
To add a cross line on the second price:
.price2 { font-size: x-small; font-style: italic; color: slategrey; text-decoration: line-through; }
Marked as helpful1@victorebegbunaPosted over 2 years ago@prantiknoor Thanks a lot. Every correction worked except for the border-radius. still trying to check through to see where the error might be.
0
Please log in to post a comment
Log in with GitHubJoin 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