social-proof-section using flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  hey, your work there is great just some touches so that will be closer to the original. Pointing to your question

  1. There is no right approach to layout between grid and flexbox. If you want something that scale easily, go with flexbox, but if there are more complex multiple layout you could do grid.
  2. May I suggest, for your cards, instead of doing flex: 1 0 200px, maybe try using flex: 0 1 100%, that way you three cards will be at same sizes according to the space of the parent container, but if you uses make sure your parent flex-wrap: wrap is not already toggled on since it will make each child on its own row. Then just use flex-wrap: wrap in your desired media query resolution.
  3. Just a suggestion, don't make the body height: 100% since it will only to the viewport's height, and will cut off the size of everything below it. You could just omit this and will be much more great

  If you need more question, clarification, feel free to ask^

  0

  ---

  

  Priyanka•150

  @priyankaladPosted over 3 years ago

  Hey @pikamart, Thanks a lot for the detailed feedback and suggestions. :) I will try using flex: 0 1 100% as per your suggestion. But mostly, I think I might need to change the layout little bit. Currently, I have included all 3 sections (info, ratings and reviews) in the same flexbox container. I am thinking to exclude review section from it and make it as a separate flexbox by keeping info and rating in the same flexbox container.

  Hope it will improve a bit!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @priyankalad Yes, that is good, I was gonna say that as well to put it in another container so that it won't be flexed. Well, if you're done. just commit so that others will see the update^^

  0

  

  Priyanka•150

  @priyankaladPosted over 3 years ago

  @pikamart yes, I will update soon :) Thanks a lot again!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @priyankalad your welcome^

  0

  

  Priyanka•150

  @priyankaladPosted over 3 years ago

  Reimplemented the whole structure(html and css) with the better understanding of flexbox. Also, this time I used top to bottom approach to style the elements. i.e. first I completed styling top most element and then moved to the next one. I find this approach very useful With clear understanding of structure, this time my code is more clean than before.

  Any feedback is appreciated! Happy Coding :)

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @priyankalad Saw the updated one and yes, more tidy and neat right there good job^

  0