All comments

• 

  Hazem Hussein•120

  @HazemHussein14Submitted almost 2 years ago

  I had a problem with the main paragraph. I couldn't make it three lines as in the challenge

  

  Stats preview card using CSS Flexbox

  1

  10
  

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  Hi Hazem Hussein, I was reviewing your code, and it seems, at least on my end, that removing the gap: 3.2rem property should convert the paragraph into three lines. The gap seems to create an empty space between your section and image, thus wrapping your paragraph.

  Afterward, you can play around with padding and letter spacing to get the paragraph to fit in a format that resembles the design.

  Marked as helpful

  0
• 

  eldoragon•40

  @eldoragonSubmitted almost 2 years ago

  I have a question

  • how can i add top on bottom padding on mobile version? it seems the padding only work in right and left the body

  Any feedback inside or outside of my question are very welcome, i want to learn more, thanks in advice

  

  Responsive Stats Preview

  1

  31
  

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  Hi eldoragon, as for your question, have you tried using margins? The way I achieved mine was to use the following:

  margin: 74px auto;

  This gave me space above and below the card while providing auto margin to center the card when the website has to be responsive.

  1
• 

  Benjamin•70

  @BenMK94Submitted almost 2 years ago

  i tried like 5 ways to make the image purple. I give up. 😅

  

  Stats Preview Card

  2

  20
  

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  Hi Benjamin, try using the property background-blend-mode,

  https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode.

  https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode

  https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

  I used soft light for the value, and it was the closest I got to be satisfied with a replication of the purple hue of the image. I wanted to make the darks darker without making the whole image dark, as you will probably see when using hard light value. I would think there are additional tips and best practices to improve color saturation, but at least using background-blend-mode achieved getting the image purple to specifications.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Raiene L. Gonçalves•20

  @R-Lemos-progSubmitted almost 2 years ago

  • How to be even more accurate in measuring the dimensions of the boxes when you have a model to follow?

  • I also noticed a difference in the font of the design and my solution, I don't know the origin... maybe the browser (Brave)?

  

  A simple solution, just pure HTML-CSS.

  2

  30
  

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  Hi, to me, the view looks very accurate to the design. Something to keep in mind is not to pixel-chase perfection. Check this article out, https://www.joshwcomeau.com/css/pixel-perfection/

  Marked as helpful

  1
• 

  Jesus•20

  @jesuswrivasSubmitted almost 2 years ago

  I found issues with the way flexbox behaves while expanding or shrinking the explorer. Whats the best way to address this issue? I'd really appreciate any source to read you can recommend.

  

  Responsive product preview card component using HTML and CSS

  3

  70
  

  JJ Fuentes•140

  @jjfuentes13Posted almost 2 years ago

  I also had issues with flexbox and eventually learned grid and used that. The only one I used flex was for the price div. Using a grid did eliminate the shrinking and expanding depending on the resolution size.

  Marked as helpful

  0