Design comparison
Community feedback
- @Agnik7Posted over 1 year ago
Hi,
Congratulations on completing this challenge!!🎉🎉🎉🎉
I have some suggestions that might help you.
-
For the body, you don't need to define
width:100%
andalign-items: flex-start
as these as default values. Even if you don't mention it,flex-start
andwidth:100%
is applied by default. You can use align-items to center the elements of the body. To learn how to center a div, click here. -
Don't make the height of the body element constant by defining the height. Instead, define the min-height to make the body responsive.
min-height: 100vh
. -
For the container, define the max-width instead of width for better responsiveness.
-
Provide a left and right margin of 2rem to the description. Although your layout is perfect, your margin and padding are off.
-
Try using relative units like rem and em more than absolute units like px, to aid in better responsiveness.
-
Provide a meaningful alt text because it is what is going to be displayed if the image cannot be displayed. So, giving a meaningful alt lets the user know what the image is about.
Hope this feedback helps you in your coding journey. Have a nice day!!
Marked as helpful1 -
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