Huddle Landing Page using Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi David, first off, good work on the whole, and you actually got most of the parts, just need to tweak the values a bit!

  Here are some suggestions I have for fixing the responsiveness:

  1. You're using a container for controlling the width, which is a good start! Instead of min-width: 1280px, change it to max-width, which means this is the maximum width we'll allow the container to be at. Using min-width was the main reason things weren't responsive, and I would try a larger breakpoint too, like around 800 or 900px.

  2. Since you're using flexbox for the hero image and text in the main section, we can use the flex property to manage the size (you may not need the max-width in those containers if you use flex):

     .parent-container {
       padding: 1rem; // this is just to make sure the content doesn't touch the browser sides
     }
     .hero-container {
       flex: 1 1 50%; // feel free to experiment with these values!
     }
     .text-container {
       flex: 1 0 50%; // feel free to experiment with these values!
       text-align: left;
     }
     

  3. Lastly, about the background image, I gave this advice to someone else earlier, so I'll just paste my comment here: What I did for the background was, I started it as the mobile version with background-size: contain, and then changed that to background-size: cover at around the 800px breakpoint. Since it's an SVG, I just kept the mobile version up until the 1400px point, which was when I changed it to the desktop version with background-size: contain.

  Hope some of this can help you, and good luck!

  Marked as helpful

  0

  ---

  

  David Chavez•190

  @codeDavidCPosted about 2 years ago

  @elaineleung Thank you for reviewing and I'll make these changes!

  0
• 

  Henry Agu•240

  @HenryAguPosted about 2 years ago

  Nice job...but check your responsiveness for the user whenever they use desktop site mode on their mobile devices

  Marked as helpful

  0