Skip to content
Submitted about 5 years ago

Desktop first using sass and flexbox

Tyshawn Anthony•115
@tyshawn-anthony
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I wasn't sure if I needed to use absolute/relative positioning. I couldn't think of any other way to get the cards in the exact positions that they needed to be in. If anyone has another way, I'd love to be enlightened! Still very new to coding so thanks in advance!

Code

Please log in to post a comment

Log in

Community feedback

  • Shashi Lo•1,345
    @shashilo

    Trying is apart of development. You keep trying and learning until you get better. I really like your hover animation. Super clean!

    You are right, there is a better way to implement this. Try to avoid exactly positioning main sections when developing. It's very difficult to maintain and it doesn't work well on multiple screen sizes. For me, I usually only use position: relative; with left/right/top/bottom on elements that needs to move just a little bit. In this case, these cards should be completed a different way. You could either look at making this with Flexbox or CSS Grid. The best way to get ideas is to look at how others from the community are implementing their solutions. Everyone does things differently and it will provide some guidance you're looking for.

  • Thomas Malice•135
    @thm01

    Cool hover effect, thanks for the idea :)

  • Pranshu Dobhal•295
    @pranshudobhal

    Hey Itchito, I loved the hover effect on cards. The way that I have positioned cards is using flexbox. I used bootstrap 4 which now uses flexbox for positioning. So, maybe you can give it a try.

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