Responsive bloq preview card

Community feedback

• 

  Tiago Pereira•80

  @BuildAndBreakPosted 29 days ago

  Hi Abdullah! Congrats for completing the challenge!

  Pro's:

  • Use of CSS Variables: Defining color and size variables at the root level makes the code more maintainable and allows for easy updates.

  • Responsive Design: The inclusion of media queries demonstrates a commitment to responsive design, ensuring the layout adapts to different screen sizes.

  Cons: -To enhance responsiveness, and avoid hitting the edges on small screen sizes, I would consider adjusting the .card and .blog-image widths using relative units like "%" instead of fixed values:

  Like this for example: .card { width: 90%; /* More flexible width / } .blog-image { width: 100%; / Image will adapt to card size */ }

  • In the heading selector, the (width: 200;) value is missing a unit, which could cause issues.

  -You could use an <address> tag for the creator’s information, as it’s associated with contact details or authorship in most cases.

  Marked as helpful

  0

  ---

  

  Abdullah-trial•80

  @Abdullah-trialPosted 29 days ago

  Thanks for the recommendation. It means alot to me 🫡🫡@BuildAndBreak

  0
• 

  KapteynUniverse•2,170

  @KapteynUniversePosted 29 days ago

  Hey, nice job.

  Card becomes off-center on big screens, because you applied max-width: 1440px; to the body and body itself isn't centered but the content inside is centered with flex, for this challenge you don't even need it but it is a nice application overall. I think to fix it you can apply it to the main or wrap the content under main and apply to it. Wrapping the content under header, main and footer with a same class div like wrapper and giving it a width:90%; or something is a common thing i believe. While writing this, it gave me a idea :D Giving that wrapper width:90%; and max-width:1440px would be better i think. That way above 1440px screen size, it will be 1440px and under it will be %90 of the viewwidth.

  Avoid using hard coded values like width: 390px; , use max-width: 390px; instead. Also using em/rem units instead of pixels would be better for responsiveness.

  You can leave alt text of the decorative images empty.

  You don't need height: 550px; on the card aswell, since you used flex on the card, a gap:1rem would be enough i guess.

  Marked as helpful

  0
• 

  daurygg•170

  @dauryggPosted 29 days ago

  I like how you use the variable to simplify your code.

  0

  ---

  

  Abdullah-trial•80

  @Abdullah-trialPosted 29 days ago

  Thanks 🫡🫡🫡@daurygg

  0