Design comparison
Solution retrospective
It was a nice challenge, I got to learn more about how to use width, heights properties and I also used more flexbox in this project, which was really good. Next time would try to make a responsive layout but I still don't know much about it.
What challenges did you encounter, and how did you overcome them?I couldn't make my page fit some different screens widths, the content disappeared in small screens (like mobile), I asked chatGPT and it taught me about using "max-width", based on this I managed to solve the problem (it still isn't perfect). I also used discord to ask about it, I got a good reply that helped me a lot.
What specific areas of your project would you like help with?Any tips about responsive layout are welcome! Also, I'm not sure if the active states are right, I didn't understand what was in Figma.
Community feedback
- @MikDra1Posted 3 months ago
To make your card truly responsive I advice you to use this technique:
.card { width: min(600px, 90%) }
This ensures that the card won’t get bigger then 600px but on smaller screens it will be 90% of the viewport . The min() functions takes the smaller number.
It is the same as:
.card { width: 90%; max-width: 600px; }
Hope you found this comment helpful ❤️
Good job and keep going 😁😃😉
0 - @KaczupinkoPosted 3 months ago
It looks good overall. The 'Learning' button should have a black background with yellow text when hovered over. Additionally, the <div class="attribution"> shouldn't interfere with the main content of the page; it can be positioned at the bottom to avoid affecting the layout.
0
Please log in to post a comment
Log in with GitHubJoin 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