Preview card using HTML/CSS, mobile & desktop on flexbox

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  Hello, Maria! 👋

  Good job on finishing another challenge! What I can suggest you is:

  • Since you're using Flexbox there is no need to position your .preview-card element with top property. You used correctly justify-content: center on your body which should center your flex container along the main-axis. The reason why it doesn't work is that you didn't set height on your body. Set it to min-width: 100vh for example and your container will be centered. Don't forget to remove top styles from .preview-card.

  Good luck with that, have fun coding! 💪

  1

  ---

  

  Maria•290

  @itsfedorukPosted over 3 years ago

  Hi Tediko, thank you for checking out my code! Yes, and I was wondering why my card wasn't being centered properly 😬

  I just tried it out again, and it worked for me with height: 100vh. Thanks for the tip!

  0
• 

  SukiyakiFiend•115

  @josuke0227Posted over 3 years ago

  Hello, Maria.

  I like your clean BEM notation for the class names👍!

  I'd like to suggest you one thing. You can use "rem" or "em" unit for font-size instead of "px". This is because the display of these day has high density, it can display 1000px even if its width is 500px. "px" unit may cause your text size shrink when it is displayed.

  Also "rem" and "em" unit works well when someone👵👴 changed the text size from your browser's setting!

  Happy coding! 😁

  1

  ---

  

  Maria•290

  @itsfedorukPosted over 3 years ago

  Hi Josuke, thank you for your comment ☺️ Appreciate the advice, I'll keep this in mind and already changed it in the solution. And indeed, it would be so much better for accessibility.

  Btw, I checked your solution out – love the animation touch on the stats numbers!

  1