3 column Preview Card Component using HTML and CSS

Community feedback

• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  Hey @briansegura15 Nice job on the media query! I checked over your code an notice something I thought I would point out. You have the following code.

  /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; }

  /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

  Is there a specific reason you reset the margin the way you did?

  A similar way of doing it would simply be to include the margin: 0; inside of the * code block you have. Here's an example of what I'm talking about.

  *, *::before, *::after { box-sizing: border-box; margin: 0; }

  You could also include the padding in there as well, to do a complete and total reset.

  As for the media query, like I said congrats! I do have one suggestion though, I noticed once the query takes affect, it makes the entire component fit into the view screen, making everything small and hard to read. I would suggest allowing it to flow past the view screen, (vertically downwards that is) allowing everything to become a larger size. It's okay on a mobile phone for people to have to scroll to see the entire component, that's a natural thing on phones. Besides that everything is looking good!

  Hope that helps!

  Marked as helpful

  0

  ---

  

  Brian•60

  @briansegura15Posted over 2 years ago

  Hello @12Kentos and thank you! I appreciate your time and your recommendations.

  As for the way the reset is set up, I have become used to using https://piccalil.li/blog/a-modern-css-reset/ recommended reset. As I am still learning the ropes, the site claims to be about a person who has spent way to much time thinking about CSS and how to reset it lol.

  Thank you for the media query tip. Ill keep that in mind and for my next challenge I hope to approach it mobile first and make things large in order for it to be easier on the eyes.

  Thank you x1000!

  0