QR CODE

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • The background color is awesome, I'll use it for the dark mode. :)
  • If you use max-width, the card will be responsive and you can reduce the width a bit
  • You'd better update padding to give a gap between the content and the border of the card

  .card {
    /* display: block; */
    /* max-width: 329px; */
    max-width: 300px;
    padding: 15px;
  }
  

  • You'd better update the img in this way

  .container-img img {
    /* height: 100%; */
    /* object-fit: cover; */
    /* border-top-left-radius: 10px; */
    /* border-bottom-left-radius: 10px; */
    width: 100%;
    border-radius: 10px;
  }
  

  • You'd better update h1 in this way:

  .container-content h1 {
    /* font-size: x-large; */
    /* padding-bottom: 1rem; */
    /* padding-bottom: 1rem; */
    padding: 1rem 0;
    font-size: 1.3rem;
  }
  

  • You can add padding-bottom to give a gap between p and the bottom of the card

  .container-content p {
    color: hsl(220, 15%, 55%);
    font-size: 14px;
    padding-bottom: 2rem;
  }
  

  • Finally, you don't need to use media queries and you can remove them because the solution will be responsive if you follow the steps above.

  Hope I am helpful. :)

  0
• 

  Sebastian•170

  @DebestaPosted over 1 year ago

  In my opinion you need to use margins and paddings to make gaps beetween image and paragraphs and try to fix problem of border-radius of image, because it's only on the left side

  0