Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section using HTML & CSS

@Sa1ners

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My second challenge, so all feedback welcome. I was not happy with the position of the images within the four boxes but could not find a better way to adjust their position within the individual divs. Any suggestions greatly recieved.

Community feedback

Lawrence 240

@LawrencePryer

Posted

Hi Mark

Great work and looks very close to me! As you mentioned, the position of the icons is maybe the one obvious difference.

I just had a go at this challenge myself and managed to position the icons by using absolute positioning. There may be better ways but this seemed to work for me.

For your .box class try setting the position: relative and then give your icons a class and set these to position: absolute. You can then try something like bottom: 30px and right: 30px to get them exactly where you want them.

I hope that helps. Keep up the good work!

Lawrence

1

@Sa1ners

Posted

@LawrencePryer Thanks for the feedback. i have had issues using absolute positioning before so was wary of using it. However its a good point so will try a version using it and let you know how it goes!

0

@Sa1ners

Posted

@LawrencePryer I tried it and it worked fine. I didn't need to create new classes, i just used the img{} as all the images are within the same parent .box{} thanks again for the suggestion.

0
Chris 740

@chrisbailey85

Posted

Well done. I haven't actually done this challenge myself yet but I have been planning out how I would do it as it's one I plan to do soon. For the positioning of the cards I recommend looking into css grid, when I first saw this project I felt like it would be a perfect project for practicing css grid, I think you could also do with reducing the box shadow on the cards.

1

@Sa1ners

Posted

@chrisbailey85 Many thanks for taking the time to comment. I have not tried css grid before but will give it a go for sure.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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