Design comparison
SolutionDesign
Solution retrospective
ggg
Community feedback
- @rohitKumar38344Posted over 2 years ago
* { margin: 0; padding: 0; box-sizing: 0; }
** You should use value of box-sizing
property: border-box
not 0 because it's invalid valueMarked as helpful0 - @Kamasah-DicksonPosted over 2 years ago
Wrap everything in the body in a man semantic tag <main> to clear the accessibility issue and also don't forget to add a margin to the main to avoid the container from overflowing screen...you an test it on mobile to see. Besides good job keep coding👍
Marked as helpful0 - @Anq92Posted over 2 years ago
Hi!
Nice work with the challenge!
There are few things you can improve:
- use max-height and max-width instead of fixed size of main container Check your solution on mobile devices in browser's dev tools - because the element don't change its size part of it goes outside the screen area. There are few other methods to adjust elements for different screen sizes like media-queries or using clamp() method
- I don't know if it was on purpose, but you missed hover effects. If you don't know how to do it check out pseudo-classes
- There is something weird happening with the background image on desktop screen sizes with use of center/cover. It would be better if you used media-queries and switch between desktop image and mobile image.
For reference you can check my solution here
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