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

Solution with Sass

@rubengomex

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


I have a tiny issue with the top border of the cards on table port.. I couldn't find the solution for that. If you can explain the possible solution would be nice. thanks

Community feedback

Diarrah 3,418

@Diarrah

Posted

Hello!

This is a super easy fix: all you need to do is use an after pseduoclass, you don't even need the before.

Just do feature-box::after { content: ''; position: absolute; height: 5px; width: 100% }.

Now just put the appropriate color for appropriate card.

Hope that helps :)

1

@edburtnieks-private

Posted

Hey Ruben.

The issue occurs because you are applying border to ::before pseudo element, leaving the background color transparent. Adding background-color property with the same color as border fills in that empty gap.

I would remove border and border-color properties completely and just add background-color with specific height. It will give the desired effect without any issues :)

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