Blog preview card

Community feedback

• 

  Adam•340

  @nadam-design

  Posted 7 months ago

  Hi @Azhagan-24!

  I’ve seen your solution, and here are a few tips to make it even better:

  • Container: No need to specify the height of the card in this case (height: 468px;), as it depends on the content.
  • Centering: If you want to align the card to the center of the screen, add to the body: justify-content: center; and min-height: 100vh; (and remove the card's margins). This sets the body's minimum height to 100% of the viewport, and flexbox will center the card within it.
  • Fonts: I noticed you’re not using the font from the design. If you’re having trouble with Google Fonts, here’s a helpful solution worth checking out: https://gwfh.mranftl.com/fonts
  • Bootstrap: You’re using .col-sm-4, which is most likely a Bootstrap class, but the library isn’t linked, so it’s a bit confusing. Use descriptive class names instead (e.g., .card, .card-image, .card-title, etc.).
  • Simplification: The .min-container div is unnecessary here; it doesn’t serve a purpose and only complicates the structure. Strive for simplicity!
  • HTML tags and landmarks: Make sure to use proper HTML elements like h1, h2, or article. For example, you haven’t used a heading for the title. span is not a heading element!
  • Inline styles: While it’s okay to use inline styles in some cases, here they’re unnecessary and not ideal.

  Go for it!

  00