product-preview-card-component

Community feedback

• 

  Adebayo Goodness Oluwadamilola•60

  @bella019Posted over 1 year ago

  Great job completing the challenge. The design looks good enough. I am yet to go through your code but to ensure you do not have the warnings again use the <main></main> tags to close up the entire work of your body. Good job once again

  0

  ---

  

  LeeLee•30

  @karleenmsrichardsPosted over 1 year ago

  @bella019 Thank you for the feedback, I used react to create this component. Please explain where I should include the <main></main> tag? It will be appreciated. Thanks much.

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Great job in completing the challenge successfully! Your solution looks good overall, the design implementation is simple neat.

  I noticed there are some issues with responsibility, as the image gets narrower with smaller screen width and eventually disappear. You can prevent that adding by some min-width like so: .card-image { border-radius: 10px 0 0 10px; width: 100%; min-width: 280px; }

  Hope this was helpful!

  0

  ---

  

  LeeLee•30

  @karleenmsrichardsPosted over 1 year ago

  @visualdenniss Thank you for the feedback. Much appreciated. I d notice the issue mentioned. I couldn't figure out why the image was not getting smaller at the same scale as the text. Will try that solution.

  Also my screen shots never seem to match up with the design. Can you explain how that works. I am new to this website. It always looks bigger in the comparison window, how can I fix that?

  1

  

  Adebayo Goodness Oluwadamilola•60

  @bella019Posted over 1 year ago

  @karleenmsrichards I am also fairly new and most time mine do not match as well. I believe the reason for the mismatch is the size and considering the fact that this is a figma or sketch design. Will love to see more of what you do in React

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @karleenmsrichards No problem. Yea the image was too fluid, it looks like you used grid but everything was set to relative widths and percentages so it kept squeezing things. They usually need a minimum or maximum width to prevent this.

  Tbf, having it 100% match is also something i ve not managed to achieve yet, but one factor is that these designs are created based on 1440px screen size, so if your screen size is different (not the resolution but viewport size) when you are coding, it might end up looking different. But don't worry about it too much, they don't have to match. As long as your solution is consistent and look good on its own, thats enough :)

  0

  

  LeeLee•30

  @karleenmsrichardsPosted over 1 year ago

  @bella019 Oh I see, do you use react as well?

  I have really not done much, its my second work. Have a few projects I am still working on but they are nothing really as I am just learning and I am basically following a number of instructions to do the project. When they are done I can show you them.

  0