Stats preview card component

Community feedback

• 

  Stefan•690

  @stfnpczkPosted over 2 years ago

  Hi Louise,

  one way to get the image closer to the color of the design is to put the properties mix-blend-mode: multiply and opacity:0.79 on the image and use a div with the purple background-color as specified in the style guide.

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hello @louisenorrsen ,

  I have some suggestions regarding your solution :

  • You can use footer for the attribution.<Footer> should be outside the <main >.

  • You can use an ordered list <ul> for the stats. Numbers don't make sense as h2s.

  • The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. the words like companies should not be in paragraph tags. They don't need to be wrapped in anything as they are already inside a meaningful element (list item).

  • Height 100vh on this is causes the content to be cut off on mobile. Change to min-height. This also allows the body to to grow taller if the content outgrows the visible page.

  • width: 327px;an explicit width is not a good way . Remove the width from the main component and change it to max width instead. That will let it shrink a little when it needs to.

  • Also you would never want to set the height of the element. Let the content inside the card element dictate the height of it .

  • You should use em and rem units .Both em and rem are flexible, Using px won't allow the user to control the font size based on their needs. Also , Don't use px for font size.

  • In line-height: 32px ;, use unitless value for the line-height , this is the preferred way to set line-height and avoid unexpected results due to inheritance.Read more in MDN.

  • General point , try to put classes directly on anything you want to style. Never Style on ID'S.

  Check the responsiveness again .

  Overall , your solution is good, Hopefully this feedback helps.

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @PhoenixDev22 I guess you might mean, footer should NOT be in the main.

  1

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @vanzasetia Thanks

  1