Skip to content
Submitted almost 4 years ago

3 column design - Responsive layout with grid/flexbox

Elena Martinez•80
@nenamartinez
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I struggled with two things here, mainly the buttons. Help with these things would be greatly appreciated.

How do I get the button hover to work properly so that the text becomes white upon hovering the button? Right now it only becomes white if the link itself is hovered. My CSS for the buttons isn't clean, advice would be much appreciated.

Also regarding the buttons, at different points in the responsive layout, the buttons are not aligned horizontally. Is there any simple way to ensure they stay aligned? The only solution I could think of was to make a grid and separate the button area from the area above it, but that seemed overly complicated.

Code

Please log in to post a comment

Log in

Community feedback

  • Ngoc Anh Vu-Martell•125
    @anh-vumartell

    Hi! I’d use interactive element like <button> for all buttons in this challenge instead of wrapping <a> tag inside a <div class=“btn btn-orange> so you can apply hover effect on the entire button. Cheers,

    Marked as helpful
  • Ngoc Anh Vu-Martell•125
    @anh-vumartell

    @Elena: I'm sorry. My advice didn't really help you. I was trying to help. I once wrapped an anchor tag around a button element and it seemed to work fine. Thanks to @Alex now I know it's not a good approach.

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