Skip to content
Submitted about 3 years ago

3 column design - Responsive layout with grid/flexbox

Elena Martinez•80
@nenamartinez
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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.

Community feedback

  • Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted about 3 years ago

    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
    1
    Elena Martinez•80
    @nenamartinezPosted about 3 years ago

    @anh-vumartell Thank you for your response! I have one question. I read that it was bad practice to use the 'button' element for links that are styled as buttons, and that the 'button' element should be reserved for buttons that have actions associated with it (like a "submit" button for a form).

    Is it okay to use the 'button' element in cases like this, that are basically just anchors?

    0
    Alex•2,010
    @AlexKMarshallPosted about 3 years ago

    @nenamartinez

    You are correct, these are not buttons, and so you shouldn't use a button. A link is the right element here, as on a real site, these would take you to a new page.

    What I would probably do differently is remove the wrapper div. At the moment you have a clash of specificity. You're applying some styles to div:hover and others to a:hover and they're competing.

    Instead, you can get rid of that div, and set display: block on the link element and style it how you wish.

    Marked as helpful
    1
    Elena Martinez•80
    @nenamartinezPosted about 3 years ago

    @AlexKMarshall

    Alex, thank you so much for clearing that up! I see the specificity problem now. For some reason it didn't occur to me that I could just style the anchor directly instead of wrapping it in a div-- d'oh! Great idea! I'll get to work on cleaning the code up.

    0
  • Ngoc Anh Vu-Martell•125
    @anh-vumartellPosted about 3 years ago

    @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.

    1
    Elena Martinez•80
    @nenamartinezPosted about 3 years ago

    @anh-vumartell Don't worry about it! We're all here to learn and help each other, and I learned through your comment. Thanks for taking the time to comment and good luck coding!

    0

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