Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section with pure HTML and CSS

Kaho 130

@shiv-chan

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@GerbenDol

Posted

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-chan

Posted

@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

@GerbenDol

Posted

@shiv-chan 💪💪💪

0

Please log in to post a comment

Log in with GitHub
Discord logo

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