four card feature using flexbox and grid

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  ** Hi Moyo-sore,**

  Well done :D

  @dwhenson mentioned already important things but also a few tips from me below:

  • check your HTML issues report above and try to fix it;
  • I think the main tag could be below the header as a main content but it's up to you;
  • instead of the span Powered by Technology I would recommend to use paragraph. Please, check it out what actually span means and we can use them;
  • as I've written above instead of div class="grid" I would use the main tag just to indicate the main content of this page;
  • instead of these sections I would use just divs as a wrapper => divs are perfect for generic groupings of content;
  • also I can use the h2's heading => Supervisor, Team builder, Karma, Calcurator;
  • width and height => you gave explicit height, that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink;
  • also you can create RWD dedicated for tablets => one column for mobiles, then two rows with two boxes each, and finally desktop design pattern otherwise you have got one column till 960px (approx).

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  1
• 

  P

  Dave•5,295

  @dwhensonPosted almost 4 years ago

  Hello Lawal, you've done a nice job here with the repulsiveness and the live site works well at all viewport sizes which is great.

  I think that there are some ways to simplify your code though. For example, if you used 4 explicit rows in the grid rather than two you could then have each box span two rows. This combined with the use of gap could help avoid all the relative/absolute positioning you've had to do on each box.

  Also I would try and avoid negative margins if possible, and really only use them in exceptional cases. In this case a regular margin on the appropriate element should be enough to make the spacing work. But as I said at the start the site works well and looks good!

  1