Skip to content
Submitted almost 5 years ago

Built with Flexbox and Grid

vongphakdy•140
@vongphakdy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with alternating feature blocks
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Pretty happy with the way this turned out. Only question is there seems to be an overflow problem regarding the Featured Blocks. Specifically the "Flowing Conversations" card in the middle. When scaling the browser down horizontally, the text goes past its. How can one remedy this issue?

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    You've done a really good job on this challenge, it looks great! The overflow issue is coming from the padding on the .card-blurb class. If you remove it for tablet and have a play around with the rest of the spacings then it will resolve the issue.

    Keep up the great work!

    0
    vongphakdy•140
    @vongphakdyPosted almost 5 years ago

    @mattstuddert Thanks for the tip. Ideally I want the text to stay within the div/it's container. I modified the .card-blurb style by adding word-wrap: break-word to prevent having to add another media query for tablets. This didn't work so it seems the best current solution is to adjust the padding per your suggestion

    0

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