3 Column Preview Card

Community feedback

• 

  suhayb jirde•1,110

  @suhaybjirde

  Posted over 2 years ago

  i did it with grid check it out i you need it❤

  10

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 2 years ago

  Hello Roy, You have done a good work! 😁

  Some little tips to improve your code:

  • Tip of graphic design: with font-family:" Big Shoulders Display ", cursive the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with a font-family:" Big Shoulders Display ", sans-serif much more similar to the primary font.
  • use min-height: 100vh to .container class instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition on the element with hover effect

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  12

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted over 2 years ago

  Hello Roy! Great job finishing the challenge, for me it looks great on mobile and desktop sizes, nice.

  To answer your question, you can easily archive the same result with grid, you won't need to use flex at mobile sizes, just grid at your 1280px media querie.

  You can try it at your own doing this:

  1. In your .container .card remove the display: flex.
  2. In your 1280px mediaquery, add at your .container .card selector the property display: grid;
  3. Also add to your .container .card grid-template-columns: repeat(3, 1fr);

  With these properties your layout at mobile sizes will stay the same (because those block elements stacks one on the other as they have display: block by default), and with the display: grid at 1280px you will have 3 columns of the same size (grid-template-columns: repeat(3,1fr))

  Hope my answer helps you!

  11

  Marked as helpful
• 

  VincenzoMuolo•180

  @VincenzoMuolo

  Posted over 2 years ago

  Hi there, the easier way to achieve that is (in my opinion) to do something like this.

  Codepen sample

  The sample is pretty raw but hope i gave you the idea of how to do it!

  As you see the key is to use column-template-columns and column-template-rows.

  Cheers

  12

  Marked as helpful
• 

  suhayb jirde•1,110

  @suhaybjirde

  Posted over 2 years ago

  perfect you did well

  00