Skip to content
Submitted almost 2 years ago

Product Review Main Solution

ToroDev•20
@heitorcallipo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Muhammad Alkahfi Khuzaimy Abdullah•60
    @alcoffeeochaPosted almost 2 years ago

    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
  • Colten Siemer•200
    @ColtensiemerPosted almost 2 years ago

    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

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