Submitted over 2 years ago

Huddle landing page with single introductory section using CSS Flexbox

Duyen Nguyen• 950

@Duyen-codes

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

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!

Community feedback

Account Deleted

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

Marked as helpful

Duyen Nguyen• 950

@Duyen-codes

Posted over 2 years ago

@RyukioMiyamoto Thanks! I think that's 1 option. I tried that and it actually leaves the right padding bigger space than the rest of the page, which leads to uneven paddings. If you have any other ideas please let me know. Im really stuck with it.

Account Deleted

@Duyen-codes what about giving main-title and main-text a max-width character based? i.e

.main-title { max-width: 20ch; }

Santhosh• 590

@santhoshpsd2

Posted over 2 years ago

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

Posted over 2 years ago

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?

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