Frontend Mentor | Responsive product card coding challenge solution

Community feedback

@tobezhanabi

Posted 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

daniel-neyla• 110

@daniel-neyla

Posted over 1 year ago

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

Tobenna• 610

@tobezhanabi

Posted over 1 year ago

@daniel-neyla 375px

August Duet• 250

@ajduet

Posted 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.

daniel-neyla• 110

@daniel-neyla

Posted over 1 year ago

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

August Duet• 250

@ajduet

Posted 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

Responsive product card

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community