product-preview-card-component using HTML & CSS

Community feedback

• 

  KapteynUniverse•1,700

  @KapteynUniversePosted 10 days ago

  Hey Sediqa, nice job.

  For the issue @Chidolue mentioned: I think removing the margin: 5rem; from .card would be better. Because around 500px card starting to shrink and become very small. If you don't want card to touch edges on small screens, you can change the to something like margin: 0.5rem;

  justify-content: space-around; on .content doesn't work because justify-content is for the parent flex container property. You need to use flex on the content if you want it to work.

  .content {
      padding: 25px;
      color: var(--dark-grayish-blue);
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }
  

  @media screen and (min-width: 768px) {
      .content {
          width: 75%;
          justify-content: space-between; /* I changed this to between, small difference but looks better than around i think */
      }
  

  I guess you can also remove every margin-top from the content elements if you use flex and space-between.

  I look this page for flexbox tricks and other things.

  Marked as helpful

  0

  ---

  

  sediqa•140

  @Hasani-SediqaPosted 9 days ago

  Hi @KapteynUniverse, Thanks a lot for your suggestions.

  1
• 

  Chidolue•120

  @ChidoluePosted 10 days ago

  I think you can make the width on mobile a bit wider, try checking the mobile view preview in the design folder.

  Marked as helpful

  0