Skip to content
Submitted over 4 years ago

Huddle introductory section

Gediminas Makutenas•765
@Senatrius
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

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
    @adarshcodesPosted over 4 years ago

    Hey! @Senatrius, your solution looks nice🙂.

    Let's see your solution from

    1. 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😁).
    1. Responsive aspect
    • You can add one more breakpoint at 1080px around for better responsiveness.
    • Mobile view looking amazing👍.
    1. Code aspect
    • Your code looks clean and relative.
    1. Issues aroused
    • You've one HTML issue, try to add the font awesome script inside the head as also suggested by @rarysson.
    2
  • Rarysson•265
    @raryssonPosted over 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.

    2
    Gediminas Makutenas•765
    @SenatriusPosted over 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 :)

    0

Please log in to post a comment

Log in with GitHub

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