3-column preview card component

Community feedback

• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello Rhona,

  Congrats for completing this challenge ! 🙂

  I'd like to suggest :

  • Add border: solid 1px transparent to your anchor tag to fix the "resizing" effect on your container during hover. You can read an article on how the box model works in CSS with content, padding, border and margin to understand better why it behaves like this.

  • You have a vertical because your .container is declared with a margin of 2rem while it is already 100% of the height. So you should remove this margin, but then, there is still a little bit of scrolling. It's because there is a default margin to elements in CSS, thus, your body has a default margin of 8px. To fix this, just add margin: 0 to your body and the Y scroll should be gone.

  Overall, well done for the challenge and happy coding ! 😃

  0

  ---

  

  Rhona•60

  @rhonallPosted over 3 years ago

  @RayaneBengaoui Thanks you so much for you help, I have fixed the error and the scroll bar is gone. And also thanks for picking up the resizing effect during hover, I didn't even noticed it before :)

  0
• 

  Faizzy•165

  @FaizzyPosted over 3 years ago

  Try changing the font size of the paragraph and reduce the height by adjusting the margins on the top and bottom. the margin is may be causing the extra space

  0