Product preview card component

Community feedback

• 

  Brian Schooler•440

  @superschoolerPosted over 2 years ago

  Hi Mathias,

  A couple of quick suggestions that might improve your design:

  The word PERFUME at the top can be made closer to the original design by adding the following CSS:

  .css-t1nuxs {
  	text-transform: uppercase;
  	letter-spacing: 0.25em;
  }
  
  .css-t1nuxs span {
  	font-family: Montserrat, sans-serif;
  }
  

  Change media query to ~1,100px - between about 500px and 1,100px the page is a bit distorted.

  Add max-width to the container to limit it to about 1400px. Anything larger than that begins to add a lot of white space to the bottom of your Add to Cart button.

  Hope this helps, let me know if you have any other questions!

  1

  ---

  

  Mathias Podesta•10

  @mapodestaPosted over 2 years ago

  @superschooler Hi Brian ,

  Thanks for your time to review my code and give me a feedback.

  I tried to improve this features, and I update my code.

  So, if you want, review my code again

  Kind Regards and thanks again !

  Mathias

  0
• 

  Furkan Rehber•230

  @rehberbeyPosted over 2 years ago

  • First of all, you should use the right colors. 🙃 Of course, you can add your own interpretation, but you should not go too far. Because when designing ui, I hope that it is already well thought out. 🎨
  • Typography is bad. Some very big, some very small. ✍️
  • It looks very strange if you set your screen to 600px width. When you increase the width above 3000px, the part of the component with the text stays too high. 💻
  • "So this is my question, how improve the css in this exercise or how we can change to improve this" I can't believe you actually asked this question!? 😵‍💫 If I'm not mistaken, you made this work using the react framework. You should learn CSS even before JavaScript. You should already know that. You have to find out if your problem is not being able to get things done using react or using CSS. If it's CSS, you should leave react aside and start CSS again.

  By the way, I'm a new developer too. It is not my intention to embarrass you. I just commented on your request as the end user. There is something for everyone to learn here.

  If you want to take a look at my work, I leave a link here. 😛 https://rehberbey.github.io/Frontend-Mentor-Challenges/

  1

  ---

  

  Mathias Podesta•10

  @mapodestaPosted over 2 years ago

  @rehberbey Hi man,

  I hope you are well

  First, thanks for your time to review my code.I know how its the roadmap to be a frontend developer.

  I worked with react but my weak point its CSS.

  I update my code, with changes in the typography and colors in the button.Trying to improve the responsive of the site.If you wish, review my code again.

  Thank for your time and your feedback

  Kind Regards, Mathias

  1

  

  Furkan Rehber•230

  @rehberbeyPosted over 2 years ago

  @mapodesta Hello Brother,

  I understand you are the developer with longer time than me. 👨🏽‍💻

  I don't know how long you've been dealing with CSS. If you want to improve yourself on a subject or repeat what you forgot, I recommend you to check mozilla's css modules.

  All you have to do from now on is practice. 🤓

  I wish you a wonderful day. 🎆

  0