All comments

• 

  Sebastian•40

  @spossnerSubmitted almost 2 years ago

  I am struggling to match the fonts and especially the gradients from figma file. Font: using the weights from figma feels a bit too strong. Have chosen one class thiner.

  Gradient: and the gradient - especially circle - has much more purple in my solution (copy&paste the gradient from figma)... any ideas what I am doing wrong?

  And texts are sometimes not 100% centered but some pixels off. Plus tailwind would in some cases go with slightly larger / smaller pixels coming from rem.. which I would propose to go for... always looks super nice. Also the tailwind color scheme.... And opacity of 51,68%?? wtf.. using 50%.

  So.. a bit of discussion with / feedback for design person in a real scenario :-p

  Thanks for the challenge!

  

  Astro+Tailwind+React solution / stretched design fixing inconsistency

  1

  30
  

  Sppam•180

  @SppamLitePosted almost 2 years ago

  Hey Sebastian👋 Nice job on completing this challenge!

  I'm glad you found the font difference between figma and your browser, good catching on those nice details! To fix that issue, you could add these two css: -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; to your body, I make it as part of my default css reset every time. You could check out this link for more details about the font smooth on MDN.

  If you side by side comparing your chrome browser with your Figma desktop window, most likely, yes, the color will be slightly different, but there is nothing to do with your gradient, it is because Figma desktop has different colorspace setup than chrome browser. (I found Firefox looks better than chrome).

  To answer your last question where I also found it is confused, like opacity 51.68% etc, a lot of time designers are not typing on the keyboard for those values, they use the mouse/trackpad and just drag the sliders to change something, which will make us as developers going crazy 🥲.

  Not mentioned that there is difference between visually centered vs geometrically centered in design principles (well that is whole another topic to discuss), that's why sometimes you see padding left 32 then padding right 40 😂.

  Hope I answered your questions!

  Happy coding!

  Marked as helpful

  0

  This comment has received 2 repliesShow
• 

  Scynes•190

  @ScynesSubmitted almost 2 years ago

  Any better way to layout the product info instead of a grid?

  

  Product preview, just HTML and CSS.

  2

  30
  

  Sppam•180

  @SppamLitePosted almost 2 years ago

  Hey Scynes👋 Nice job on completing this challenge!

  I do think grid is harder than flex box but you did this challenge with grid, impressive! 👍

  To answer your question:

  Use flex box is easier to achieve the same layout as you did in grid.

  Similar to what you did using grid to .preview-card, you could do display: flex, flex-direction: column; for mobile and flex-direction: row; for desktop. Instead of controlling the height with grid layout, you could adjust the actual .product-image height since you are using the background-image.

  I hope this could help 🙂.

  Happy coding!

  1