Design comparison
Solution retrospective
I build a responsive layout and was able to use multiple fonts.
What challenges did you encounter, and how did you overcome them?when importing the fonts , i could not first figure how to use multiple fonts at the same time. but through trial and error i was able to solve it.
What specific areas of your project would you like help with?Responsive layout, how to control size during different screen size.
Community feedback
- @MikDra1Posted about 2 months ago
I encourage you to use this technique to make the card responsive with ease:
.card { width: 90%; max-width: 37.5rem; }
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container { display: grid; place-items: center; }
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
Marked as helpful1@mohamedballaPosted about 2 months ago@MikDra1 Thank you very much This is actually very helpful I have been using media queries for different size screen and margin auto for center
0 - @hieutran249Posted about 2 months ago
I think this solution is great. I recommend that the sizes of some components such as the user avatar should be a little bit smaller. Overall, this solution is nice.
Marked as helpful1@mohamedballaPosted about 2 months ago@hieutran249 yes it need a little improvement Thank you for the suggestions.
0 - @MazontheMoonPosted about 2 months ago
Well Done 👏
Your code is clean and easy to follow.
I will give one suggestion for your next challenge(s) to help with the layout shift "our" card has from the sample card( where the attribution text is not part of the main example image so they don't match up well when you do the comparison) so if you set the position to fixed for the attribution text instead of having it the normal layout flow then your blog card should be more in line with the sample blog card :)
Happy coding!
Marked as helpful0
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