Responsive result summary dashboard created using HTML, CSS, FLEXBOX.

Community feedback

• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  Hi, nice looking design!

  The issue with the button positioned at the far bottom of the Summary pane can be easily fixed with Flexbox. I saw you used Flex in many other places, so it will be easy for you:

  .result { display: flex; flex-direction: column; justify-content: space-around; /* or space-between */ }

  Then remove the margins and fiddle with padding on all the <div>s with the #ids, and the right-hand pane can be nice and compact like the example.

  Keep coding!

  Marked as helpful

  1
• 

  Arber Lisaj•340

  @arberlisajPosted over 1 year ago

  Hi @hillarionCodes I would like to congratulate you on completing the Results summary component and I might have a couple suggestions regarding your solution

  • A semantic element clearly describes its meaning to both the browser and the developer so instead of spamming a bunch of divs it would be a lot better to use semantic elements like for example <div class="container"> should be replaced with <section class="container"> or even <main class="container"> and instead of <div class="result"> you want to use <section class="result">
  • In the right container where the results are displayed you want to add some padding so the button doesn't touch the border it would be a lot more aesthetic from a designers eye

  All in all good solution and i wish you a long time in the community

  Happy Coding :)

  Marked as helpful

  0

  ---

  

  Mayowa Oladimeji Oyinlola•30

  @hillarionCodesPosted over 1 year ago

  @arberLisaj thank you so much for the observation, i will try to work on that

  1