Four Card using HTML and CSS

Community feedback

• 

  Rowan Pereira•330

  @rowanroosterPosted 5 months ago

  I think for positioning at different sizes you kinda need to play around to get it just right.

  For this challenge try using flex-direction: column; and justify-content: center; - this will force the 4 cards to split into 3 columns with the 4th card taking up space in the middle/second column. You can then move the cards in the first and third columns down, to get the final look. If that makes sense give it a try it should work without changing any other code.

  I like the hover effect with the borders! if you dont want the box to change sizes on hover, you can add transparent left, right and bottom borders at the same thickness, for example:

  .box {
    border: 2px solid transparent;
    border-top: 2px solid black;
  }
  
  .box:hover {
    border: 2px solid black;
  }
  

  Marked as helpful

  1

  ---

  

  errbrokko•80

  @errbrokkoPosted 5 months ago

  @rowanrooster Thank you for the advice. I still struggled a little with the positioning but I think I'm ok with it. The idea with the transparent border was perfect and exactly what I was looking for. I'll update my solution and then move on to the next project.

  0

  

  Rowan Pereira•330

  @rowanroosterPosted 5 months ago

  Awesome, yeah that looks cool! @errbrokko

  0