blog preview card using html 5 and css

Community feedback

• 

  KapteynUniverse•2,150

  @KapteynUniversePosted 1 day ago

  Hey dimivs, nice job.

  Only problem about responsiveness is; card is not shrinking under 350px, you can fix that with

  img {
  max-width: 100%;
  }
  

  These little things usually are in css resets. Use a modern css reset for every project or you can check this one too.

  Also don't forget to add min-height: 100vh; to the body so justify-content can work.

  You don't need to apply margin on every element, since you used flex on the section you can just use gap. On the figma file; every item between "learning" and the paragraph has a 12px space, so just use gap: 0.75rem on the section. The gap between "learning" and image and also between paragraph and profile picture is just a bit bigger, 24px, so if you want to pixel perfect you can give an extra margin-top or bottom 12px. Lastly every item has a 24px gap between card borders, so a padding: 1.5rem on the section will do that.

  Marked as helpful

  0

  ---

  

  dimivs•20

  @dimivsPosted 1 day ago

  @KapteynUniverse thanks a lot! I had never seen this gap propertie. Long way to go.

  0

  

  KapteynUniverse•2,150

  @KapteynUniversePosted 1 day ago

  @dimivs body height is as big as the content inside it, min-height: 100vh; is setting it to the 100% of view height/the screen height size. On VS Code, you are probably seeing it centered because preview screen is not as big as the normal page.

  Marked as helpful

  0