Challenge complete with just HTML and CSS (media queries)
Design comparison
Solution retrospective
I know that was not the same desing, but I tried to make it as similar as possible.
Community feedback
- @Zy8712Posted 12 months ago
Your site looks great. Good work!
One minor thing I feel you could change in your projects moving forwards is that you don't need
alt
descriptions for images that are main for decorative purposes. You could just lave it asalt=""
. That way screen readers won't have to read it out. The main situations when you would need an alt description is when the image conveys some type of important information.Marked as helpful1 - @ratul0407Posted 12 months ago
@vinimello0 congrats on completing this challenge🎉🎉
Alright @vinimello0 we have a lot to fix so let's go : )
main { display: grid; place-content: center; min-height: 100vh; } .wrapper { display: flex; align-items: center; justify-content: center; max-width: 600px } //remove all the other properties from the wrapper. These 4 lines will do the work .content_box { min-height: 100%; //with all the other properties you've set }
Always try to avoid
position: absolute
as much as possible It's not worth for everything trust me😅And you didn't set the mobile image to set it just use the picture tag and the source tag. Here's the mdn reference for your help.
I hope this was helpful for you😀😀
Happy coding my friend🙂
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