Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page using HTML, CSS and Flexbox

Wesley 330

@wesleyjacoby


Design comparison


SolutionDesign

Solution retrospective


I seem to struggle with the layout of the webpage - especially with the desktop versions.

Is it correct to add the background images to the body and then have a main container that wraps everything? Then within that main container, have other smaller containers for the various elements.

Thanks for the help!

Community feedback

Lucas 👾 104,440

@correlucas

Posted

👾 Hello Wesley, congratulations for your solution!

Nice that you've used mobile first approach for this solution!

Everything works good, there's only a quick for the mobile background image that's not filling all the background. Swapping from background-size: contain; to cover. See the code below:

    background-image: url(./images/bg-mobile.svg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    background-color: var(--violet);
}

Hope it helps, congrats!

Marked as helpful

0

Wesley 330

@wesleyjacoby

Posted

@correlucas Thanks man! I do mobile first because I find it easier than desktop. facepalm Haha

Thanks for the tip - I'll update the code! :) Glad to know I'm on the right track, even though it doesn't feel like it.

1
Lucas 👾 104,440

@correlucas

Posted

@wesleyjacoby You did good, I never did a solution with mobile first, I should try that. Congrats.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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