Responsive Huddle Landing Page

👾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!

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!

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:

• 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%
    }
  

• 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