Mobile first approach using FlexBox

Community feedback

• 

  Venus•1,640

  @VenusYPosted 9 months ago

  Great job on this challenge! You've done really well making it look like the design, and it's responsive too, which is good.

  There are some minor tweaks that you could make, however.

  I noticed that when hovering over the button, the card shifts a bit.

  I believe this is happening because you removed the default border from the button, but then you add a border when the user interacts with the button. The added height of the border causes the card's height to increase as well.

  You can fix this by simply moving the border style to the button:

  button {
    border: 1px solid hsl(0, 0%, 95%);
  }
  

  Since the border colour is the same as the button's background colour when it's not being interacted with, it blends in, so you can't tell that there's a border there.

  To make it even more obvious that it's a clickable object, you could change the cursor type when the user hovers over a button:

  button {
    cursor: pointer;
  }
  

  I also noticed that you manually set each button's background colour to that of its respective card, but since they're the same, you can just set it to its default value, which is transparent:

  button:hover,
  button:focus-visible {
    background-colour: transparent;
  }
  

  Finally, this is a very minor thing, but I noticed the slight typo of 'SUVs' instead of 'SUVS' in the middle card.

  Other than that, this is a really good solution!

  Hope this has been helpful! :)

  Marked as helpful

  1

  ---

  

  Rita•30

  @ritakerkovitsPosted 9 months ago

  Hi @VenusY

  I really appreciate your feedback, huge thanks for that!

  Indeed, the card shifts while hovering, and to be honest, I was a bit stuck because of it. So, these are great pieces of advice. I will apply them to my solution :)

  1

  

  Venus•1,640

  @VenusYPosted 9 months ago

  @ritakerkovits No worries! I'm glad I managed to help you out a little. Feel free to give me another reply if you get stuck on anything, and I'll try my best to help you out.

  I would appreciate it if you marked my comment as helpful. :)

  1