3 column Preview Card Component using HTML and CSS

Community feedback

• 

  Kent O'Sullivan•1,870

  @12Kentos

  Posted about 3 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!

  01

  Marked as helpful