Skip to content
Submitted over 1 year ago

Flexbox, max-width, relative units, media query, Mobilefirst-WorkFlow

Aram Nayebbandi•510
@devaramnye
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 finished up this work and I am now a little more comfortable with flexbox. I hope you like my work.

I've got one issue. If you hover in desktop or mobile size, the height of my boxes increase because my button increases by 1px due bordering. Does someone have a hint or idea how I can fix that without giving my height a fixed value? I would like to stay responsive.

Community feedback

  • Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    Hi!

    To answer your question there's quite an easy fix for it! Add a transparent 1px border to your button and just change the color of it when hovered like this:

    button{
    border: 1px solid transparent;
//rest of the styles
}
button:hover{
border-color: white;
}

    This way the button won't move when hovered as there will still be a border on it when it isn't hovered. (faced this same challenge when I did this project haha)

    Happy coding!🕺🏻

    Marked as helpful
    1
    Aram Nayebbandi•510
    @devaramnyePosted over 1 year ago

    I would like to give a big hug ... I changed it now and everything worked without losing responsivness. Have a beautiful night. In germany we have 11:06 pm right now and I can go to bed without any thoughts of my last project.

    I wish you a good sleep and a beautiful start in your day. Stay healthy!@adityaphasu

    1
    Boots 😺•1,590
    @adityaphasuPosted over 1 year ago

    @devaramnye Gnite!💤

    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