Submitted over 2 years ago

Responsive hero section using Flexbox

Gregg Christofferson• 295

@gchristofferson

Preview site View code

This is a solution for...

Huddle landing page with a single introductory section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I normally use the wildcard selector to set box-sizing: border-box on all my projects. I also include margin and padding resets here. Should I be putting these resets on the body tag selector instead?

Also I had a little trouble styling the font-awesome social icons. I ended up having to set a separate font-size for the twitter icon and to center them in the parent div with the border, I had to use transform: translateY(). It seemed to get the job done, but for some reason I don't like the solution. Any way I could have centered the icons with flexbox and sized them all consistently without having to make a separate font-size for twitter? Any other suggestions on how I can improve the code is welcome too!

Thank you!

Community feedback

Ken• 4,915

@kens-visuals

Posted over 2 years ago

Hey @gchristofferson 👋🏻

I love the fact that you always have some questions, it just helps my "job" so much easier 😂

I generally use the wildcard and that's how I've been doing since day one and never have I ever had any problems or any need to put it on the body. My suggestion would be to leave is as it is.
And I think this is what you were asking for 🙃

.fab {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

I hope this was helpful 👨🏻‍💻 you've got a good hang of making the websites as close to the design as possible 👌🏻 Cheers 👾

Marked as helpful

Gregg Christofferson• 295

@gchristofferson

Posted over 2 years ago

Hey @kens-visuals

Thanks for clearing up my doubt about the wildcard selector. Also, that snippet worked perfectly! Thank you! 🙌 I know I'm a little OCD 🤷‍♂️

Ken• 4,915

@kens-visuals

Posted over 2 years ago

@gchristofferson you're welcome 😇

Oh, yeah, I definitely know how OCD feels like 😂

Please log in to post a comment

Join 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