Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

four-card

N1Dovud•150
@N1Dovud
A solution to the Four card feature section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I am proud that the website is responsive and has a great design until the vw of 220px. After that, it gets messy. The next time I would like to get better at eyeballing because it is taking me a lot of time.

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

In some cases, I forgot the inputs of some properties and had to get some help from chatgpt. Also, I have a hard time knowing whether to use padding or margin when I can use both, although I fully understand their differences. Finally, when I was thinking about the layout of cards, it took me quite a while to think about wrapping two middle cards into a div to get the desired layout.

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

Can anyone explain to me why my first card is smaller than others?Also, as you shrink the viewport width, you can see that at some point my two middle sections nested inside a div will have a smaller width than other cards even though div does not contain any margin or padding. Why is that the case? What can I do? Lastly, I truly don't know how to handle the distorted view of the website when the viewport width is under 220px. Can anybody give any suggestions?

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on N1Dovud's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License