Skip to content
Submitted over 4 years ago

Solution with Sass

Rúben Gomes•20
@rubengomex
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

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
    @DiarrahPosted over 4 years ago

    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
  • Edgar Burtnieks•465
    @edburtnieks-privatePosted over 4 years ago

    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

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