Four Card Feature Section Solution

Community feedback

• 

  Yacoub AlDweik•2,830

  @YacoubDweikPosted 20 days ago

  Good job!

  Let me say first that almost everything is good you got the design nice and clean the only issue is with positioning things, this needs a bit more touches to be perfect, you talked about grid but you never used it, this is the best place to use grid instead of flex, take a look you have 2 rows 2 columns in desktop that become into 1 column 4 rows in mobiles, we're taking about 2D in desktop and 1D in mobiles.

  Using flex led to writing much more code in each media queries and that led for you to forget to reset the width for some cards, that's why you would see some cards in full width and some others take 377px in tablets (screens around 600px).

  You're doing a great job and you are putting effort but I think as I said before you might need to focus on one thing at a time, understand it completely then move on to the next lesson, do not do this -> "trying to learn about everything I do not know", Instead, you already know flexbox, code this design using flexbox and make sure you understand the lack of control that you have when using flexbox, then move on to grid and recreate the layout again using grid, remember that with flexbox you can control things horizontally OR vertically but with grid it's gonna be both at the same time.

  As I told you before maybe the resource you are learning from is not good enough, check this video out and I'd highly recommend this channel in general:

  https://www.youtube.com/watch?v=xPuYbmmPdEM

  One last thing, do not give classes like this: product__card product__card--supervisor || this should be only like this: product__card supervisor || using BEM does not mean to repeat yourself , keep it up!

  Marked as helpful

  1

  ---

  

  P

  Oryan Hachamoff•210

  @oryanhachPosted 19 days ago

  @YacoubDweik Thanks a lot for the feedback and tips! Will definitely check out the video you suggested, thank you!

  0