3 column preview card component using grid & flex box

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @AliBenlemmouden 👋🏻

  I have some suggestions for the project.

  • First, for the car icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here.
  • Next, I suggest implementing :hover state, which you can find in design folder active-state image, after you implement it you can also add transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Lastly, instead of giving individual border-radius to each <div> you can do this:

  .container {
      width: 800px;
      height: 500px;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      grid-template-rows: auto;
      align-items: center;
      border-radius: 10px;
      overflow: hidden;
  }
  

  the last two lines that I added will take care of all <div>s.

  I hope this was helpful 👨🏻‍💻 Other than that, you did a good job, nicely done. Cheers 👾

  Marked as helpful

  1

  ---

  

  Ali BENLEMMOUDEN•30

  @AliBenlemmoudenPosted about 3 years ago

  @kens-visuals thanks for your advices.

  • just i have one question, the footer can not be at the bottom of the page automatically in mobile view so i decided to use

  @media (max-width: 500px) {
      footer{
          position: absolute;
          top: 1730px;
          width: 100%;
          font-size: 12px;
          text-align: center;
      }
  }
  

  but this solution does not work well. so if you have any solution tell me 👍

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @AliBenlemmouden I surely do 😃 personally I use this hack with grid, there's similar thing with flexbox too, but here's what I suggest:

  body {
      min-height: 100vh;
      background-color: #ddddddbf;
      display: grid;
      grid-template-rows: 1fr auto;
      place-items: center;
  }
  

  I'm pretty sure you're familiar with display: grid; and can easily tell what this does.

  I hope this was helpful 👨🏻‍💻 Cheers 👾

  Marked as helpful

  0
• 

  othman•120

  @othmanbenhamdounePosted about 3 years ago

  well done

  Marked as helpful

  0