Four Card Feature Section using Grid and Flexbox

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Bluer,

  Well done with RWD! :D

  I have checked mainly your HTML structure, a few tips from me:

  • h1 should be used only once on a page;
  • I think the main component is below the header;
  • you have used so many nested divs in this solution, I think it is unnecessary;
  • giving an explicit height and width it is not a good practice (container) => I prefer use min-height or max-width;
  • I'd recommend to learn BEM naming convention => it will help you to create very readable classes.
  • this is component is very small and you have got 817 lines of code in your CSS file => I think you have got lots of repetitions over there, try to check your project again and maybe delete unnecessary lines.

  Greetings :D

  1

  ---

  

  bluerhythmz•230

  @bluerhythmzPosted almost 4 years ago

  @SzymonRojek Hi! Thank you very much for the feedback it is appreciated!

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @bluerhythmz

  Hi again, I am glad you like it. Also, I just would like to give more information about the width and height. Possibly you know it but it will be good to refresh this part of knowledge:

  width vs max-width:

  I'd recommend to read this article => MDN;

  It is essential to understand well the height and width vs min-height/max-height & min-width/max-width but don't worry. It is quite difficult subject. You shouldn’t need to give items height unless they have 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 => that's a reason why flexbox doesn't work in your project.

  Have a read this article => Difference between width and -max-width.

  Example: create a div, give some text, color blue, padding 10px and max-width 300px. You will get limited the width to 300px as the property clearly states. This is quite useful because if you were to actually resize the browser (viewport width =>vw manually) to less than this amount 300px you can see what will happen? You can clearly see that the width is still going to actually adjust to the maximum width and that is a difference between width property and max-width property. Essential conclusion: the max-width says essentially for any element that already has a width of 100% such as a div from our example the max-width says make that be maximum width, otherwise it can go less than that. If you will set a width on this div => width: 300px you can see that the width increase and overflow on the side.

  Hopefully this explanation is helpful.

  PS. Don't forget to upvote my comment on here that you find helpful.

  Greetings :D

  1

  

  bluerhythmz•230

  @bluerhythmzPosted almost 4 years ago

  @SzymonRojek Thank you very much for explaining in detail it was very helpful. I updated my solution if you would like to check it out.

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @bluerhythmz

  Yes, I have seen. But you have changed it everywhere (I think we do not have to totally avoid the height and width => just we have to now the difference between min and max). Anyway, it will be good to read about it, check articles and youtube.

  example:

  • Adding a max-width to the main container or wrapper of the page to prevent the content of the page from becoming too wide on extra-large screens;
  • Adding a max-width to the cards to prevent them from looking too stretched when the layout first changes from desktop to mobile;

  Have a nice time :D

  0
• 

  Johnny o Foco•10

  @johnnyofocoPosted almost 4 years ago

  Perfect! Congratulations ... You helped me build my solution!

  0

  ---

  

  bluerhythmz•230

  @bluerhythmzPosted almost 4 years ago

  @johnnyofoco glad this helped you! :)

  0