Stats preview card component using flexbox mobile first design pattern

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, the responsiveness could be better, because at point 1000px going down to 750px, the content on the left side gets hidden. The mobile layout however looks really great.

  For your questions:

  • I always use responsive unit, mostly rem. When I am coding, it is troublesome to convert manually every pixel unit to rem, that is why, in my scss, I create function where I could just put the pixel unit, then it convert it to rem.
  • For this one, I don't really know what to use since I haven't made this project. Some uses what you mentioned, background-blend-mode along with opacity to control the color of the purple overlay. You can see other solutions on this one challenge if you visit your solution, then click visit challenge hub then in there, select the solutions tab.
  • Usually, the mobile version is what I use on tablet layout. Since I now do mobile first, using maybe 800-900 pixels, is where I set the desktop layout, but sometimes I change, it depends on how the design looks at some screen-size. Sometimes, I mix the desktop layout and mobile layout, before transitioning to only desktop or mobile.

  Some other suggestions would be:

  • Always have main element to wrap the main content of your webpage. This helps users to properly navigate your site. For this one, you could use main on the card selector instead of just div.
  • For the .card-content you don't need to add width: 36.667em.
  • The text Get insights that help your business grow. should be a heading tag, using h1 would be really great on this.
  • Also, when you have a text-content, do not just use div to wrap the text, use p tag. Make sure to wrap content in a meaningful element.
  • For the card-stats selector, you can use ul element on those, since if you look at it, those are "list" of information about the company website.

  If you have more queries, just drop it here okay. Aside from those, great workagain on this one.

  Marked as helpful

  1
• 

  Rashi•165

  @shangumPosted about 3 years ago

  Hey @pikamart . Thank you for the information. It was beyond useful. Currently I am currently in the beginning phase of another challenge and will make sure to implement it in the manner you suggested.

  Right after I will update the code for this project in an attempt to cement the concepts.

  Wish me luck as I now need to take the Sass leap of faith.

  Thank you again for taking the time to review my submission!

  0