I used HTML and CSS (grid and flex)

Community feedback

• 

  Rishad•115

  @Noob-Coder-YouPosted about 3 years ago

  hey man,its a great so great i was just checking your work and found when you hover on learn more the height of the element increases and i fixed it just add border:3px solid transparent; on all the button element

  Marked as helpful

  1
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Marko,

  Really great effort and responsive. With a few tweaks it'll be perfect.

  A few considerations from me:

  • your border style border: white solid 3px; is being added to your button on hover, try adding it to the non-hovered state too and the jumping should stop

  you could try this do get the button to stay at the bottom:

  • wrap a div around your <img> <h1> and <p> (you should only have 1 <h1> on the page too for accessibility reasons)
  • add display: flex; flex-direction: column; justify-content: space-between; to column-sedan/suv/luxury or ideally create a new class. The space-between value will push the button down and keep it there
  • you might need align-self: start; on the button

  Marked as helpful

  1

  ---

  

  Marko•65

  @ElioskasPosted about 3 years ago

  @darryncodes Thank you, I'll try playing around few things you suggested for sure.

  I ended up using outline rather than border, because outline doesn't affect the element's size.

  0

  

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hope it helps. Outline is a good shout 👌

  1
• 

  Mieszko•325

  @MieszkoKowalikPosted about 3 years ago

  Your buttons are breaking because of the display property. You can set that to block / inline-block to stop that.

  Also when adding border only to hover states, it makes the elements bigger after hovering and can cause some shifting.

  Marked as helpful

  1

  ---

  

  Marko•65

  @ElioskasPosted about 3 years ago

  @MieszkoKowalik Thanks a lot! It was quite helpful.

  0
• 

  Sohail Jafri•350

  @thesohailjafriPosted about 3 years ago

  learn more from breaking? I didn't shaw that on the preview.

  0

  ---

  

  Marko•65

  @ElioskasPosted about 3 years ago

  @thesohailjafri It happens on smaller size, before it goes into mobile mode.

  0

  

  Sohail Jafri•350

  @thesohailjafriPosted about 3 years ago

  @Elioskas oh I see it now, add min-width to the parent element of so n so, and make learn more a button <button> element not attribute <a>

  min-width won't let the parent element to go below certain width.

  1