Huddle-landing-page-with-a-single-introductory-section

Solution retrospective
Hi folks,
My solution might not be optimized/the correct method. I used the grid to place the header, main, and footer. Using the grid-column/row property I aligned the child items and used flex too. Please review my code and let me how it can be improved better.
1 When the screen shrinks below 400px, the right side of the screen remains fixed but not the left side. I used max-width of 400px for the container. What might be the issue?
Thanks for reviewing my work.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ChamuMutezva
Hi Sarvotham
So far so good with your challenge. Here are some things to consider:
- let your alt values be descriptive for the benefit of assistive technology users. A value like
hero-img
does not present a clear message to someone who is not able to see the image. - the
register
button seems to be an anchor element , it should kind of navigate to another section or page for the registration - the social icons are meant to be links to social media accounts, hence an anchor element should have been used
- the body has a
height: 100vh
, change that tomin-height: 100vh;
. Min-height allows you to accommodate all the content by allowing scroll while height will cut off your content if it does not fit on the screen. Using dev-tools check that on small screens like 375px.
Marked as helpful - let your alt values be descriptive for the benefit of assistive technology users. A value like
- @correlucas
👾Hello Sarvotham Gowda, congratulations for your new solution!
Your solution is perfect and also the design match everything the challenge requires. The only thing I see that can be an issue is the
facebook icon
that doesnt have the same size of the other social icons, to fix that you can create a class to manage the icon sizes, for example setting all of them with the same class with the sizemax-width: 24px
andheight: auto
. This way you've a standard for the icon sizes.👋 I hope this helps you and happy coding!
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