Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Review Main Solution

ToroDev 20

@heitorcallipo

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. Trying to use more "em" and "rem", is it correct to use that way?
  2. As a simple challenge, but very good to train some CSS skills, hit me with some ideas of what to do correctly.
  3. Been struggling to know how to separate the paragraph as well as the preview one, so used <br/> tags, is it correct that way?

Community feedback

@alcoffeeocha

Posted

CMIIW (1) Yeah, that's good for accessibility if user want to change the browser font size. But, it does not change if user zoom in or out. I think, Border/Shadow width = px // Icon size = em (When inline with text) // Margin for typography = rem (For margin between heading and paragraph) // Padding for typography = em (For different button size) // Font size = em or % (For heading font size and secondary font size) // If you are unsure, use px instead (3) Me too. I feel better to create another paragraph or heading instead of <br /> and add margin-top or margin-bottom to give it space

Marked as helpful

0

@Coltensiemer

Posted

Hey nice work on this one! You have the desktop layout looking great.

I would recommend to try to make it responsive to smaller devices (mobile). See the challenges design photos for details about the mobile layout.

Read about media queries as they are a power house tool in css to make a responsive design. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries.

Keep up the hard work!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord