Huddle Landing Page Single Introductory Section | CSS Grid & Flexbox
Design comparison
Solution retrospective
How can I improve my layout responsiveness?
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi, Justin Vera! π
Nice work on this challenge! π Your solution looks great! π Also, well done on getting the alternative text correct! π
Regarding the responsiveness of the site, I notice that on
769px
width, the register button is really close to the social media icons. Also, the text is really dense. So, I recommend adjusting the breakpoint of the media query.More recommendations for improvements.
- I think the content that is wrapped by the
aside
is not complementary content. It is the main content of the page. So, I would suggest swapping theaside
withdiv
instead. - The register button is not a submit button. Not only that, I would also consider it as a link because I would expect once the users click the button, it will navigate them to the register page.
- I suggest wrapping each of the social media icons with an anchor tag. They are actually social media links of the company.
- Lastly, I suggest removing the below code. By default,
main
element is a block element.
main { width: 100%; }
That's it! I hope you find this useful! π
Marked as helpful0 - I think the content that is wrapped by the
- @correlucasPosted about 2 years ago
πΎHello Justin, congratulations for your new solution!
I've checked your solution and is really amazing, you did a good work here, I don't think youve issues with the responsiveness.
Your solution is already super responsive, the only thing you miss is the alignment with the image and the text section that's not vertical aligned, fix using this:
aside { display: grid; align-items: center; }
Here's my tips for images: To make your image fully responsive add
display: block
andmax-width: 100%
andobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
π I hope this helps you and happy coding!
Marked as helpful0
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