Huddle-landing-page-with-a-single-introductory-section
Design comparison
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.
Community feedback
- @ChamuMutezvaPosted over 2 years ago
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 helpful0 - let your alt values be descriptive for the benefit of assistive technology users. A value like
- @correlucasPosted over 2 years ago
πΎ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!
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