Design comparison
Community feedback
- @grace-snowPosted almost 3 years ago
Hi Maria
It's a shame you've used bootstrap for this. I can see that's holding back your own css learning here. I recommend for your next challenge you ditch the library and write it all yourself, you'll learn much better that way. You can always pick up libraries and frameworks later on
Some suggestions for this
- alt text is really important and needs to be written properly or sometimes left empty on purpose. The most important information on this whole page is the logo - the name of the product - and you've hidden it from search engines and assistive tech users by writing "logo" as the alt
- look up when a button should be a button element and when it should be an anchor tag
- this solution is broken for me on mobile because you've disabled scroll with overflow hidden. I can only see part of the solution on mobile
- in css you are setting a lot of widths and heights. As you write your own css instead of using a library, it will become clearer why that's usually a bad idea. The approach will cause problems
- if using a 3rd party library you need to stick to their breakpoints, not deviate
- don't forget to add focus-visible styles to all interactive elements as well as hover styles. Really important for keyboard users.
I hope this helps for now, good luck
Marked as helpful0@mariamALLIPosted almost 3 years ago@grace-snow thanks for review, would have asked what mobile device you’re using because the landing page works quite fine on mobile devices last I checked. Also point of correction my name is Mariam not Maria.
0@grace-snowPosted almost 3 years ago@mariamALLI sorry that's why a wrote but my phone has autocorrected sorry about that!
I use an iPhone 12 mini. We can never check all phone sizes but need to ensure our solutions work down to about 280 wide (that's the new foldable phone width)
Marked as helpful1@mariamALLIPosted almost 3 years ago@grace-snow thanks for pointing that out totally understand your point of view. Also, I have made the correction so it should be visible now on all mobile devices and scroll just fine.
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