Flexbox Galore

Community feedback

• 

  Ovidiu-Antonio•3,125

  @ovidiuantonio

  Posted almost 5 years ago

  Hello,

  Very nice solution; you did a really good job! Even if your boxes have a static size the site is very responsive! One thing you can do to the .progress-bar is to give it this properties: display: flex; and align-items: center; to align the gradient bar that it's inside it. Flexbox is a nice and easy way to align items and I use it pretty much everywhere.

  Happy coding! Keep going!

  20
• 

  Shashi Lo•1,345

  @shashilo

  Posted almost 5 years ago

  Hey Cara. Looks like you were able to redo this using Flexbox. Great job! This implementation looks very much like the design too. I did find some areas that can improve:

  • .main should be 920px wide and the child containers should span the entire 920 width.
  • Remove the fixed height from .left-container. Allow this section to be fluid. This way if anything changed, it's easier to know where the fault is. If you inspect this element with browser dev tools, you'll see that the margin cuts the icons in half. Its true size is lost.
  • <div class="icon-bg"> has a hover state, but it's true clickable region is the <img>. For better usability, remove the div and move .icon-bg to <img class="icon-bg">. Less DOM elements, cleaner code, win-win.
  • .progress-bar-active should be 81.5% of the width.
  • Mobile looks great, but the left/right containers should have only 15px spacing between them.

  10
• 

  

  Emmilie Estabillo•5,600

  @emestabillo

  Posted almost 5 years ago

  Hi Cara, great job with this challenge and figuring out flexbox! It’s responsive and pretty much adheres to the design. My only suggestion would be to place the desktop background on body, like you did with the mobile version. Then it's just a matter of positioning it at the bottom. It will give you the option to delete .footer , one less element to maintain. Hope this helps :-)

  10