Huddle Landing Page Single Introductory Section | CSS Grid & Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 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 the aside with div 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 helpful

  0

  ---

  

  Justin Vera•270

  @justinnveraPosted over 2 years ago

  @vanzasetia Thanks a lot for the feedback!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @justinnvera No problem! 👍

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 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: blockand max-width: 100% and object-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 helpful

  0

  ---

  

  Justin Vera•270

  @justinnveraPosted over 2 years ago

  @correlucas Thanks a lot for the feedback!

  0