Design comparison
Solution retrospective
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?
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