Nice CSS challenge designed by Mahdi Hashemi

Community feedback

• 

  Marcos Travaglini•4,840

  @BlackpachamamePosted 10 months ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">

  📌 Some suggestions

  • Add a padding to generate interior space on your card. This prevents you from using margin or padding on child elements to achieve the same result
  • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens
  • Do not use % for width or height. Better use rem, em or px
  • I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers
  • I leave you the task of researching the reset CSS and the box-sizing: border-box

  0

  ---

  

  Mahdi Hashemi•270

  @M1389Posted about 2 months ago

  @Blackpachamame Hi dear friend thanks for your useful suggestions. I'll look for your suggestions as soon as possible. Thank YOUUUUU

  0
• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 10 months ago

  Hello @M1389!

  Your project looks great!

  I noticed that you used position to place the card in the middle of the page. Here's a very efficient way to center the card:

  • Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  0

  ---

  

  Mahdi Hashemi•270

  @M1389Posted about 2 months ago

  @danielmrz-dev

  Hi Thank you for the suggestion and also the feedback, recently I have been using flexbox and also the grid a lot. In my opinion they are a life saver in CSS, aren't they?

  Generally, Thank You for your feedback and help

  Respectfully from Mahdi Hashemi

  0