Responsive product card

Community feedback

• 

  Tobenna•610

  @tobezhanabiPosted over 1 year ago

  Well done. Do work on the font-size and margin so that the whole content can fit into the card.

  .card-details p {
    font-size: 0.9em;
    color: var(--dark-grayish-blue);
    line-height: 1.6;
    margin-bottom: 1.8rem;
  }
  
  .price {
    font-family: var(--fraunces);
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 1.8rem;
  }
  

  Adjust the font size and margin-bottom respectively. on the media query part.

  Happy coding! 😀

  Marked as helpful

  0

  ---

  

  daniel-neyla•110

  @daniel-neylaPosted over 1 year ago

  @tobezhanabi with what screen size where you looking at the website?

  0

  

  Tobenna•610

  @tobezhanabiPosted over 1 year ago

  @daniel-neyla 375px

  0
• 

  August Duet•250

  @ajduetPosted over 1 year ago

  Your implementation is spot on for the 375px and 1440px screens, but for other mobile devices the layout breaks down. I don't know if you are interested in that, but just wanted to let you know. If you do want to fix it, you should look into adjusting your breakpoints.

  1

  ---

  

  daniel-neyla•110

  @daniel-neylaPosted over 1 year ago

  @ajduet thanks for the tip. Could you explain a little more how i can do it?

  0

  

  August Duet•250

  @ajduetPosted over 1 year ago

  @daniel-neyla absolutely. You just have to take into consideration the common media breakpoints. Which you did well for extra small and large and large layout. For the medium screens you have to be a little more decisive. You could stick with either the small or large screen layouts, but would have to adjust margins, padding, font size, flex directions, etc for it to layout better. Medium screens are typically tablet screens where large screens are laptop and small monitors. Here the common screen sizes. 320px — 480px: Mobile devices. 481px — 768px: iPads, Tablets. 769px — 1024px: Small screens, laptops. 1025px — 1200px: Desktops, large screens. 1201px and more — Extra large screens, TV.

  Marked as helpful

  0