Skip to content
Submitted over 3 years ago

3ColumnPreviewCardComponent with button hover outline

Aldi Anugra Pratama•115
@LordAldi
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 need to know is my approach on giving outline when button is in hover state is correct, and how do you make your content center? i try and its work but i want to know how you would approach this, thanks

Community feedback

  • Account deleted

    Hello,Aldi Anugra Pratama!👋🏻

    Congrats on completing this challange!😃

    To center a div both horizontally and vertically you can use flex properties. For example , you can use parentElement{ display : flex; flex-direction:column; justify-content:center; align-items:center; } and this will do the job.

    For your project you can remove margin-left and margin-right from your container and try putting the upper code in your body tag.Here the body is the parentElement for your project.

    You can read this article to know more precisely : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

    Have fun coding.🎉🎉

    0
    Aldi Anugra Pratama•115
    @LordAldiPosted over 3 years ago

    Thanks that is very helpful

    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