Fully responsive & Semantic Cards using flex

Community feedback

• 

  cacosted•570

  @cacostedPosted over 2 years ago

  Hello @SurajHadage, your solution looks and works really well, I was looking in the source code and I have some suggestions that can improve and simplify the code.

  1. Avoid to use a fixed height with px, I noticed that you use a height on .container, this could bring problems when the content is larger the text could overflow due to this height. Insteed, let the content flow and if you need a shorter size you can reduce the font size or the spaces like margin or padding.

  2. If you want to add space to the content use padding, in your code you put a margin in .content, this worked but this is not the intention of margins; a good rule of thumb could be: if you want some space between the content and border use the padding, if you want space between two elements use margin. (If you have doubts search about the box model).

  3. The flex is a powerful tool to reduce effort, the flex is great to set layouts very easy somethings you only need to use two lines of code to do the trick, in this case I saw that you put a width: 33% on if flex-item to have even spacing, this is a good idea if you want to mix things up, but by default the flex tries to put every child in even spaces so in this case you could remove it.

  4. Avoid using height and width to add space, in the buttons you use a height to add some space vertically, this is a dangerous practice that can break your responsive design and affect on accessibility, if you want space the padding is your friend, you can add something like padding: 2rem 5rem, and you would get the same result but without affecting your responsive

  Marked as helpful

  0