Created with flexbox

Community feedback

• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Also one thing I forgot to mention, why do you use "card-image" class name and then camel case class name "cardContent", do you they have some semantic meaning ? I suggest to choose one of them and use it all the time it will be more consistent. You also can check out BEM naming system.

  Marked as helpful

  4
• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  HI Han.

  On desktop view card looks great. using linear-gradients and image as background was very cleaver idea to create overlay effect -- good job.

  On Tablet and smaller sizes there are some issues:

  1. On Tablet cardContent and card-iamge are not proportionally scaled and image becomes very small compared to cardContent, that is becouse your cardContent div has way more content in it then card-image (which is empty) so flexbox shrinks your card-image wayyyy more then cardContent. There are different methods how to solve this kind of problem. I suggest to watch this video.
  2. On mobile view card is too close with edges of browser, so use paddings or margins.
  3. I highly suggest not to use fixed height value for elements, in this case for your card. Instead let your card content resize their container by their own, but if you want your container to have same default height use min-height property instead of height.

  Marked as helpful

  4

  ---

  

  Han•45

  @creatorindiePosted about 3 years ago

  @hardy333 Thanks for the suggestions! Next time i'll care about other view scales. Also I think I would to like use camel case :D

  0
• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Han

  Great effort, well done!

  • you could change <section class="banner"> to <main class="banner">. And it's best practice for accessibility to only use one <h1> in your design.
  • semantic html
  • heading hierarchy

  Happy coding!

  Marked as helpful

  1

  ---

  

  Han•45

  @creatorindiePosted about 3 years ago

  @darryncodes Thanks for the suggestion! I'll keep in my mind.

  0