Skip to content
Submitted over 3 years ago

Huddle landing page with single introductory section using CSS Flexbox

Duyen Nguyen•950
@Duyen-codes
A solution to the Huddle landing page with a single introductory section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

1 thing is unsolved. How to get the text takes up 40% (it seems) of space on Desktop design. Mine is both mockup image and text share same amount of space. Please help! Thanks!

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Try using some padding-right on the text container, should work without distorting the img.

    Marked as helpful
  • Santhosh•590
    @santhoshpsd2

    main > * { /* getting all the direct children of main */ flex-basis: 100%; }

    with above code you are setting all flex-items to be of equal size. Try to give 60% for image and 40% for text.

    Actually your site looks good just add some padding to main-content section.

    Marked as helpful
  • Duyen Nguyen•950
    @Duyen-codes

    Thanks for your feedback and complement! I also tried doing as you've just suggested (60% flexbasis for image and 40% for text), however, then the image gets bigger than the original design and this pushes the social link footer down out of the view( like i had to scroll down to see it). Is there any other way?

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