Skip to content
Submitted 2 months ago

Responsive card preview components using html and css

Dr slope•70
@Drslope-99
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

am proud of the fact that i was able to complete this challenge from start to finish without any form or procastination, am also proud of the fact that i was able to use my knowledge on CSS grid i just learnt recently to implement part of the challenge

What challenges did you encounter, and how did you overcome them?

one of my biggest challenges was uploading the project to my Githup repository and also hosting it live on github pages but my bro helped me overcome that challenge

What specific areas of your project would you like help with?

how do i use responsive fonts effectively using the css clamp() function

Community feedback

  • Svitlana Suslenkova•5,340
    @SvitlanaSuslenkovaPosted 2 months ago

    body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

    clamp(min, vw or%, max) or clamp(1rem, 5vw, 2rem). It will always try to be 5vw, but won't be smaller then 1rem or bigger then 2rem.

    Hope you found this comment helpful :)

    Marked as helpful
    0
    Dr slope•70
    @Drslope-99Posted about 2 months ago

    thank you very much for the corrections, really appreciate @SvitlanaSuslenkova

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord