Huddle landing page with single introductory section using CSS Flexbox

Community feedback

• Account deleted

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

  Marked as helpful

  0

  ---

  

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 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.

  0

  Account deleted

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

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

  0
• 

  Santhosh•590

  @santhoshpsd2Posted almost 3 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

  0
• 

  Duyen Nguyen•950

  @Duyen-codesPosted almost 3 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?

  0