Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Well that's my first time with mobile-first, I have some trouble with width but I encounter that.
What challenges did you encounter, and how did you overcome them?Min/max width trouble with choosing
What specific areas of your project would you like help with?Code feedback is required. That's my first time with mobile-first coding and I can see advantages of that. But I need some advices about the min/max-width property. Did I write it properly?
Community feedback
- P@kaamiikPosted about 1 month ago
Just a few notes:
- Instead of using
spanfor text, use aptag.spanis an inline element mostly used for times when there is text with a different style within a block element like headings,p, orli.
- This is incorrect:
font-size: 62.5%;. Do not change the HTML font size.
- Use
min-height: 100vh;instead ofheight: 100vh;.height: 100vhstrictly limits the height to the viewport size, potentially causing overflow issues if the content is larger than the viewport. On the other hand,min-height: 100vhallows your element to grow in height if the content exceeds the viewport size.
- Instead of using
height: 4.8rem;for your button, use block padding. It's incorrect to limit your text-based container. Also your button needs hover and focus.
- The media query
min-width: 90emis too high. The media query can be much smaller.
Try to refactor your code based on this feedback before moving on to the next project. I've noticed some recurring issues that others have mentioned in your previous projects.
1 - Instead of using
Please log in to post a comment
Log in with GitHub
Join 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