Skip to content
Submitted over 2 years ago

Solution with Flexbox

{ D D D }•150
@DavidDelannoyDeveloppement
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

Constructive comments are welcome !

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    Hello David, congratulations for your solution!

    I have few tips about how you can improve your code a little bit:

    Define on body the max-width: 100vw; max-height: 100vh; to make sure your website will display the full viewport height/width. You don't need to define the with of 1440px on body instead your can set one div as a container with the max-width of 1110px to keep all content inside and make all content centered. And for the mobile version you can use media queries to set when the page will become mobile changing the font-sizes, flex-direction and etc.

    I hope it help you!

    0
    { D D D }•150
    @DavidDelannoyDeveloppementPosted over 2 years ago

    Thank you very much @correlucas ! Yes indeed I had a lot of problems with the size of the body in this exercise. I thank you very much for your help. I will be able to start this challenge again with your precious advice. Thanks again for your help !

    1
    { D D D }•150
    @DavidDelannoyDeveloppementPosted over 2 years ago

    @correlucas, I take this opportunity to ask you if you have the solution to my html error : <html lang="en">

    I keep getting this error but I can't fix it.

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @DavidDelannoyDeveloppement Hello David, this error isn't related to the language, the panel report sometimes is a little bit confuse. The error is related to heading levels, you need do the H1 heading for the main title and don't forgot to increate 1 level at time.

    • I saw another thing in your solution that you can fix: Instead of adding the background to the signboard class, you can add it to the body, in this way the background will not depend upon this block, example below:

    body { background-image: url(images/bg-desktop.svg); background-color: rgba(103, 75, 175); }

    • About this .signboard container, you set the height value as a fixed value, apply max-height to make this value flexible, the container height will come the *margin and paddings between the elements.

    Say me if it works!

    1
    { D D D }•150
    @DavidDelannoyDeveloppementPosted over 2 years ago

    Thanks a lot @correlucas ! I'll try that and get back to you ASAP !

    1
    { D D D }•150
    @DavidDelannoyDeveloppementPosted over 2 years ago

    Perfect !!! I took step by step what you told me and everything works perfectly well and this time without error ! Thank you very much @correlucas, for your help and advice !

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @DavidDelannoyDeveloppement You're welcome!

    1

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