Submitted about 4 years ago

Huddle introductory section

Gediminas Makutenas• 765

@Senatrius

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

Trying to get the height correctly was more challenging than I thought it would be. Also, the main image doesn't seem fully responsive on my side. Once again, any tips and/or advice is always highly appreciated. Thanks in advance :)

*Also, if someone could clue me in on what HTML validation is giving me issues, I'd appreciate it as well. It says style tags don't need a type attribute, but the thing is, there are no style tags in my website. Could it have something to do with the FontAwesome icons I'm using?

Community feedback

Adarsh Pratap• 5,515

@adarshcodes

Posted about 4 years ago

Hey! @Senatrius, your solution looks nice🙂.

Let's see your solution from

Design aspect

It looks great👍.
I'll recommend using 100vh for single page sites (don't aware of the mystery of vanishing of background image while using 100% height😁).

Responsive aspect

You can add one more breakpoint at 1080px around for better responsiveness.
Mobile view looking amazing👍.

Code aspect

Your code looks clean and relative.

Issues aroused

You've one HTML issue, try to add the font awesome script inside the head as also suggested by @rarysson.

Rarysson• 265

@rarysson

Posted about 4 years ago

Hi @Senatrius, your result looks awesome.

The issue that is complaining is probably from the FontAwesome. Looking through your code, maybe it's the place you put the script link to the FontAwesome. On the FontaAwesome site, it says "Copy your kit's code into the <head> of each template or page in your project where you want to use Font Awesome.", and I saw that you put it on the <body> instead of the <head>, maybe changing the place of the script link to FontAwesome will resolve your issue? I am not sure, but you can have a try.

And I have a question, how do you managed to get the height right? My Screenshots always looks messy xD.

Gediminas Makutenas• 765

@Senatrius

Posted about 4 years ago

@rarysson Hi there. Thanks for the advice, I'll be sure to try that out when I get a chance. As for the height...

I'm not entirely sure :D As I said, I had a surprising amount of trouble trying to make it look nice. I think what helped primarily was setting body height to 100vh instead of 100%. But it doesn't always work, my previous project looks all stretched and weird in the preview as well. I suppose it's just one of those mysteries of responsive design we've yet to uncover :)

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