Responsive blog preview card with HTML & CSS

Community feedback

• 

  J. Dheeraj•50

  @dheeraj78

  Posted about 2 months ago

  I should agree that i really like the way the CSS has been written i mean it really is formatted and follows the standard naming convention and declaration. Which I'm still trying to learn. The problem that i saw was the page not being responsive in smaller screens it would be better to resize the main image and also change the screen height so the main card could be in middle or set some margin in top and bottom.

  10
• 

  P

  Michael•180

  @Networksentinel

  Posted about 2 months ago

  Hi Retina, your solution looks great — I love the mobile-first approach! 😊

  I reviewed your code and wanted to mention a few things I noticed:

  • On mobile screens, when the phone is flipped, the <footer> gets pushed a bit too close to the card.
  • In the Design comparison view, the desktop layout appears smaller than the design specs.
  • The card isn’t fully centered vertically relative to the screen — the <footer> takes up some of the viewport height, which affects the alignment.

  I took the opportunity to clone your repo and experiment a bit. Here’s what I changed:

  • Added some top padding to the <footer>.
  • Centered the card vertically with a few small CSS tweaks.
  • Reorganized index.html and styles.css slightly to reduce repetition and improve clarity.

  I didn’t adjust the sizing yet, since that would take more tweaking. But for sizing, I used clamp() in my version of the challenge because I wanted to complete it without using media queries — and clamp() worked perfectly for that!

  If you're interested, I’d be happy to open a pull request so you can check out the changes — and we can also talk more about how I used clamp() for responsive sizing 🙂

  Whether you respond or not, thank you — your solution gave me the chance to clone a repo and work with someone else’s code for the first time!

  Keep up the awesome work!

  10