Product preview card component

Solution retrospective
Hi, I can't place the before discount price at the centre, and I am not sure why the blue border keeps appearing when clicking the button. Can anyone help me with that? Thank you.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @hyrongennike
Hi @LekhaKumar,
Good job on the challenge
You can either use negative margin to pull it up, negative transform:translateY() or you can add the below.
.before-discount { vertical-align: super; }
ideally I would suggestion just wrapping both the h2 and p in a div and using flexbox. Hope this is helpful.
Marked as helpful - @correlucas
👾Hello Hamsalekha, Congratulations on completing this challenge!
I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code.You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use
<picture>
instead of<img>
wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. You can manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
Marked as helpful - @lgorvin
Well done! Looks great so far. The blue border appears because you are using the btn-primary bootstrap class. With that class removed it should work without the blue border appearing.
Marked as helpful
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