Skip to content
Submitted over 4 years ago

Four card feature section with pure HTML and CSS

Kaho•130
@shiv-chan
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

I have two things that I couldn't figure out myself. If anyone would give me some advice or comment about it, it would be appreciated!

  1. How can you align the header(the first two sentences) and the paragraph below? I couldn't match the start line of those ones anyway.

  2. When applying the responsive design on 320px wide view(Mobile S size), the paragraph inside each box got chopped off a bit. How should I have done to make it look right?

Thank you for reading!

Community feedback

  • Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    Hi Kaho! Your solution is looking super good! Well done! 💪🏻

    1. Honestly, this is something you shouldn't even want to attempt unless you are sure the layout is never going to change. You could set a max-width on the heading that's exactly the same width as your heading and maybe look into using text-align: justify;. But in the end that's not the point of responsive web design and not a requirement of the design given.
    2. You are setting width: 250px; on your paragraph, which is wider than the card around it. Remove the width or set it to 100% to fix it.

    Please also be sure to adept your layout to other screen sizes, smaller screen (but wider than 320 pixels) the layout is overflowing the body. I think on your next challenge you should focus on making things as fluid as possible, so it's truly responsive.

    Keep up the great work and good luck on your next challenge! 😁

    1
    Kaho•130
    @shiv-chanPosted over 4 years ago

    @GerbenDol Thank you so much for your kind feedback! I tried the second one and it turned out to look nice way. I'll keep working to get used to responsive designs :)

    1
    Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    @shiv-chan 💪💪💪

    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