stats-preview-card-component-main

Community feedback

• 

  hardy•3,660

  @hardy333Posted about 3 years ago

  Hi, nice solution, card looks very good.

  Few suggestions:

  • For html use more semantic tags for example for hole card you can use <article> element/tag.
  • you can use ul and li elements for showcase - that is a list of stats , for different kind of thing.

  For css:

  • I noticed that card image is a little bit stretch, the main reason is one property in your css : background-size: 110% 100%; instead use background-size: cover; -also use can remove background-position: contain; at all. background-position: is valid property but "contain" is not valid value for it "contain" value is use with background-size not with background-position.

  Marked as helpful

  4

  ---

  

  Mariusz Olszewski•360

  @molszewski34Posted about 3 years ago

  @hardy333 Hey. I tried to switch background-size: cover, with background-size: 110% 100% and percentage aproach seems to work better for me. When i use "cover" it seems to give fixed values and img isn't scaling in proper way.

  I never tried use <article> tag but i will try it.

  2

  

  hardy•3,660

  @hardy333Posted about 3 years ago

  @molszewski34 Try to create empty project, create container, use some image as it's background and experiment with background properties, you will start to understand how those properties work.

  "cover" doesn't gives fixed values to image, it is exactly the opposite to that. cover tries to COVER the whole background no matter what if background increases, background-image will also increase - it is dynamic.

  One main advantage of "cover" value instead of percentages is what is doesn't change image aspect ration, that's why I suggest you to use that property instead of 110% and 100% values, this values stretches your background image and make this ugly ...

  Hope you will figure it out how to use "cover" ... good luck.

  Marked as helpful

  4

  

  Mariusz Olszewski•360

  @molszewski34Posted about 3 years ago

  @hardy333 ok. will try it in next challenges. thanks for suggestions. I didn't realize it in this way.

  2