Two Column Landing Page w/ Flexbox

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Awesome work on this challenge, Dex! Your solution looks really good.

  My main recommendation would be to avoid using the img element for purely decorative images like the curve on the section. Instead, I'd create a pseudo-element (like ::before) on the section and use position: absolute; and background-image to get it showing up and positioned correctly.

  This makes sure you're not adding extra HTML elements unnecessarily.

  Let me know if you have any questions. You've done a really good job on this. Keep it up! 👍

  1

  ---

  

  Dex•225

  @tihuskyPosted over 4 years ago

  @mattstuddert Thanks for your feedback, Matt! I tried using pseudo-elements with a background, but unfortunately I can't really get it to look the way I want it to 😐

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @tihusky I'd recommend having another go and sticking with it. It's definitely possible and is a cleaner way of doing it than using an img tag. It's a great technique to have in your toolset 🙂

  0

  

  Dex•225

  @tihuskyPosted over 4 years ago

  @mattstuddert I played around with the positioning and think it looks pretty good now. Is there a better way to make the background span the entire width? My solution felt a bit hacky at first. Thank you again!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @tihusky the best way to do it would be background-size: cover;. I'd also set bottom: 100%; to push it up from the bottom the whole height of the element. This ensures it sticks perfectly to the top.

  0

  

  Dex•225

  @tihuskyPosted over 4 years ago

  @mattstuddert Alright, I tried doing this. But how would you determine a proper height for the pseudo-element in that case? I've tested this:

  https://stackoverflow.com/a/22211990

  Should I just create more media queries to change the spacing between the sections once the curve becomes too big?

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @tihusky you can use that method, or you can set the height yourself. You could definitely use media queries to change the spacing. If it's not looking right then that would be a good way to go.

  0

  

  Dex•225

  @tihuskyPosted over 4 years ago

  @mattstuddert I've added some media queries and now I'm pretty happy with how it looks. Thanks for your advice and for providing us with these awesome challenges! 😀👍

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @tihusky no problem! I'm glad you like them 🙂 Your solution is looking really good 👍

  0