3-column-preview-card-component-main

Community feedback

• 

  imad•3,330

  @imadvvPosted almost 2 years ago

  Greeting Ahmed! Congratulations for completing your challenge, 👏👏👏.

  I take a moment to look at your code, and you did great job, moreover I have some tips for you that may help improve your solution,

  for the body is a good idea to change the fix height: 100vh to min-height: 100vh let the body grow with the contents, if you look at devtools on the browser and hove over body element you will notice that body not wrapping up all the page, you can check this also by changing background-color in the body, as for the cards if each of them well have a h1 it's better to change from the div to section element for more semantically meaning, and you can take advantage for that to reduce duplication on css and use nth-child pseudo-class.

  example

  <section class="card">
  </section>
  
  <section class="card">
  </section>
  
  <section class="card">
  </section>
  

  css

  .cards {
  display: inline-block;
  padding: 35px;
  width: 300px;
  }
  
  .cards::nth-child(1) {
  background-color: hsl(184deg, 100%, 22%);
  }
  .cards::nth-child(2) {
  background-color: hsl(184deg, 100%, 22%);
  }
  
  .cards::nth-child(3) {
  background-color: hsl(184deg, 100%, 22%);
  }
  
  

  and to solve border-radius issue you can simply put it on the container itself,

  .container {
  border-radius : 10px;
  }
  

  Hope this give you some hints Overall you did great, have a great day/night, and keep coding 👍.

  Marked as helpful

  0

  ---

  

  ASM•100

  @ahmed-sabbah-mohamedPosted almost 2 years ago

  @imadbg01 thank you so much for this valuable hints. I will be careful to your hints and i appreciate it. when modification the code, .container { border-radius: 10px; } section's border didn't changed

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,160

  @MelvinAguilarPosted almost 2 years ago

  @ahmed-sabbah-mohamed Hi!!!

  In addition to the above excellent feedback, you can use border-radius to parent component and use the overflow: hidden property to clip any content that extends beyond the border-radius of the component.

  .container {
     border-radius : 10px;
     overflow: hidden;
  }
  
  
  .sedans {
      /* border-radius: 10px 0 0 10px; */
  }
  @media (max-width: 950px) {
    .sedans {
       /* border-radius: 10px 10px 0 0; */
    }
  }
   
   . . .
  

  Marked as helpful

  0

  

  ASM•100

  @ahmed-sabbah-mohamedPosted almost 2 years ago

  @MelvinAguilar thank you it a great hint i tried it and it works well.

  0