Fist QR

Community feedback

• 

  Secre•210

  @SecreSwalowtailPosted over 1 year ago

  Hello Kazuha ,

  I have some tips that may help you :

  • Avoid using grid for the body. You can use flex to position the main card. Grid is more used when you have complex designs.

  • Avoid using fixed height/width. You can use min-height to give the card a minimum height that will always stay and a max-width to stop it from expanding more than that The content overflows to the left for this reason

  • Try and give the texts in the card a text-align to center them

  • A best practice is to only type CSS rules that you need If you type rules that at first doesn't do anything , later it may conflict with other CSS rules

  • You can look into a reset stylesheet. It removes a lot of headache from images, content not having the right padding/margin etc.

  Resources :

  • https://www.joshwcomeau.com/css/custom-css-reset/
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://www.w3schools.com/cssref/pr_dim_min-height.php
  • https://www.w3schools.com/cssref/pr_dim_min-width.php

  Keep up the work , this is very nice.

  0
• 

  Kenneth Obeng•50

  @obengkennethPosted over 1 year ago

  Please center the content underneath the image using text-align: center property in css and add an alt tag to your image for accessibility.

  0