Design comparison
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.
Community feedback
- @hyrongennikePosted about 2 years ago
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 helpful3@LekhaKumarPosted about 2 years ago@hyrongennike, thank you so much. I will surely take note of it and modify it as you said.
0 - @correlucasPosted about 2 years ago
👾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 helpful1@LekhaKumarPosted about 2 years ago@correlucas thank you so much. I will correct them using the mentioned tag for better SEO. Thanks for the link, I will check it now. Have a nice day, Lucas :)
0 - @lgorvinPosted about 2 years ago
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 helpful1@LekhaKumarPosted about 2 years ago@lgorvin thank you so much. Will remove it. Thanks again!
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