Skip to content
Submitted 11 months ago

four card feature section using HTML & CSS | Grid

Ahlam•300
@AhlamAb22
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

It took me some time to figure out how to make it look good on both screen sizes, but it was an enjoyable process :) The only problem was when I tried using clamp() for font-size and width following other developers' advice, but I faced some challenges. I believe it's because this was my first try, and I'm sure I'll get better each time I try again.

Your feedback matters!

Community feedback

  • Kimo Spark•2,190
    @kimodev1990Posted 11 months ago

    Really great work, Just few tips :-

    • The div class .intro could be simple display: flex flex-direction: column ; , No need to be display: grid ;
    • If you've got issues in controlling your sizes using clamp ( ) method for font-sizes and width, Here is a link where It calculates your desired changing sizes with you viewport dimensions https://www.marcbacon.com/tools/clamp-calculator/

    Hope you find this Helpful.

    Other than that, Really nice work and always keep going on. ( Consistency )

    0
    Ahlam•300
    @AhlamAb22Posted 11 months ago

    @kimodev1990 Yes I just realised that there is no need for grid, I will work on that! Thank you :)

    1

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