Stats-preview-card-component-using-Flexbox

Community feedback

• 

  Fidel Lim•2,775

  @fidellimPosted about 3 years ago

  Hi Arslan,

  Great work on finishing the project. Your desktop view works perfectly but the mobile view needs some tweaks.

  • you can add a margin to the main tag to give space to your card. Also, the card is long in mobile view. This is why a part of your card is hidden. To fix this, prevent from using height:100vh unless you are really sure that the card will fit within that view screen.

  main {
      margin: 2rem 0;
      width: 100vw;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  

  Try, min-height instead. With this, the height will start at 100vh. If the content is exceeding 100vh, it will increase its height depending on the content.

  • Then, if you would like to mimic the color of the image's overlay. You can do background-blend-mode: multiply What this does is it will darken the color overlay.

  I hope it helps :)

  Marked as helpful

  0
• 

  Muhammad Shajjar•1,100

  @muhammadshajjarPosted about 3 years ago

  Hey Arslan, congrats on completing this challenge, you did a great job

  some suggestions would be

  • By using width on your card cause horizontal scroll or your content gets cut on the window at some viewports, use max-width instead, and adopt the habit of not specify fixed heights and widths, it would create unexpected issues for you
  • Have a look at mix-blend-mode or background-blend-mode to put an overlay on your images as it is in the design. check out this I used background-blend-mode to put overlay, not sure about it worked 100%, but it works to some extent
  • Use one h1 per page, mainly for tilting the page
  • Use rem or em , don’t go with pixels, if you are writing scss make a function to convert pixel to rem, it would be handy

  Marked as helpful

  0