Skip to content
Submitted almost 5 years ago

Position: relative/absolute | HTML | CSS

Robin Watts•120
@robinwatts96
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Was the position: absolute / relative the right way to go about positioning the divs for the desktop version?

Code

Please log in to post a comment

Log in

Community feedback

  • Mahesh Yadav•1,220
    @Mahesh-yadav

    Card Images are not positioned correctly. You are using margin properties to places icon images which is not the correct way. Instead you can do following:

    1. set position: relative on your .col class for the card.
    2. For the image set position: absolute, then you can use left, right, top, bottom properties to control where you want to place the image relative to the card. e.g. setting right: 0 and bottom: 0 will correctly place the image in the bottom-right corner.

    Also you need to change background-color of cards to white

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