Responsive Huddle Landing Page

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Kurt, congratulations for your new solution!

  To keep your code more organizate is better you don't use body as a container you've set max-width: 1300px to the body and its not so good, replace instead it in the container div.Note that this container size is 1110px not 1300px

  After that Give a margin to the container to avoid the content touching the screen edges.

  Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/huddle-lp-section-vanilla-css-logo-animation-easter-egg-bem-meb3nl6zF8

  👋 I hope this helps you and happy coding!

  Marked as helpful

  2
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, KurtJF! 👋

  It's great to see you completing another challenge! 👏 Good effort on this challenge! 👍

  Regarding your questions:

  • I am not sure about this. But, I recommend trying to use flex-basis to control the width of the image.
  • I would recommend making the a as a flex container. This way, you can use justify-content and align-items to make the social media icon always in the middle of the circle. As a side note, the circle should be the anchor tag (not the li).
  • If make the circle from the anchor tag then it will be easier since you just need to a:hover. After that, change the color of the border and the color. Font Awesome icon will follow the color of the anchor tag.

  Some more suggestions:

  • As @correlucas has said earlier, you should not set max-width on the body element. Treat the body element as the page of the website. You only want to control the width of the element inside the body element.
  • nav is used to wrap internal navigations. So, I recommend swapping the nav with a div.
  • Make sure link have text content (or label). In this case, you can label the link with aria-label since there's no visible text content.

  That's it! I hope this helps!

  Marked as helpful

  1
• 

  Osaro Iyoha•1,080

  @osaarohPosted over 2 years ago

  Hello Kurt,

  Nice work on the challenge. The mobile view looks good but you can add margin-top for the".socmed-container". For your questions:

  Question 1

  • Since the "main" tag is a flex item, wrap the hero "img" in a div tag, and give the child elements of the main tag a flex of 1 like so

      <main class="hero-container">
        <div class="img-container">
           <img src="">
       </div>
        <section class="content-container">
        </section>
      </main>
  

      .img-container{
          flex: 1
      }
      .content-container{
          flex: 1
      }
      img{
          /*Use width instead of max-width here*/
          width: 100%
      }
    
  

  Question 2 & 3

  • I suggest you take out the border from the "li" element an use it on the "fa-brands" class like this:

  
  .fa-brands {
    color: var(--white);
    font-size: 1.1rem;
    border: 1px solid white;
    padding: 1rem;
    border-radius: 3rem;
  }
  .fa-brands:hover {
    color: var(--soft-magenta);
    border: 1px solid var(--soft-magenta);
  }
  

  • You can take out the "top" and "right" property in the "fa-brand" class

  Hope this helps

  Marked as helpful

  1