Skip to content
Submitted over 4 years ago

Position: relative/absolute | HTML | CSS

Robin Watts•120
@robinwatts96
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Mahesh Yadav•1,220
    @Mahesh-yadavPosted over 4 years ago

    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

    1
    Robin Watts•120
    @robinwatts96Posted over 4 years ago

    Hi @Mahesh-yadav , thanks for the comments! I'll make sure to use this info in future projects. All the best

    0

Please log in to post a comment

Log in with GitHub

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