Hello
I’m afraid this looks very broken on mobile landscape at the moment. A reason might be a height 100vh instead of min-height somewhere, and its trying to show the desktop layout already when there isn’t room for it.
I recommend you take some time to focus learning on semantic html structure. That will help you plan your layouts better anyway.
And then address the specific issues on this
- missing header element
- inaccessible form (input not labelled, error message not linked to the input, no aria-live on the error element, missing button type)
- look into srcset or the picture element when you need to swap an image at a particular breakpoint.
- duplicate html - If you find yourself needing to repeat chunks of html content that’s a sign there is a problem with the layout approach. With planning you should be able to display the same content in different layouts
- there is no need to duplicate css code in media queries if the contidion would already be met by the previous one
- you will find layouts easier, have shorter and more performant code if you style mobile first instead
- try not to include elements in html that don’t need to be there (eg decorative content). If it’s not meaningful content, could you use a pseudo element and/or background image instead
I hope this is helpful
Marked as helpful
@brendanmadden
Posted
@grace-snow Wow, this feedback is invaluable, Grace! Thank you so much. I really appreciate you taking the time and making the effort to provide real feedback and suggestions that I can learn from and use to improve upon from here.
I am going to do exactly what you said, and try my best to address all of those issues. I started working on the social proof section challenge this afternoon. I'm going to really take my time on this one, and make a real effort to learn more about, and use semantic best practices.
As you said, hopefully this will help to improve my layouts and therefore responsiveness as well.
I'll also take a mobile first approach to this one. I've been hesitant because it seems a little bit tough to wrap my head around right now. But as I said I'll really take my time on this one and give it a shot.
I hope you'll check my next one out, and let me know your thoughts!
Thanks again, Grace!
Brendan
