Design comparison
Solution retrospective
There are a couple of problems I encountered. . .
-
The hero image is not shrinking even with max-width and % used?
-
Is there a way to position the icons inside the circle better?
-
How can I make both the icon and the circle border change color on hover at the same time?
Any advice regarding CSS if there are declarations I can remove would be greatly appreciated, Thanks!
Community feedback
- @correlucasPosted about 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 is1110px
not1300px
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 helpful2 - @vanzasetiaPosted about 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 usejustify-content
andalign-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 theli
). - 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 thecolor
. 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 thebody
element. Treat thebody
element as the page of the website. You only want to control the width of the element inside thebody
element. nav
is used to wrap internal navigations. So, I recommend swapping thenav
with adiv
.- 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 helpful1 - I am not sure about this. But, I recommend trying to use
- @osaarohPosted about 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 helpful1
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