Article Preview Component

Community feedback

• 

  P

  Marcus•120

  @marcus-hillPosted 4 days ago

  Hi @roychandu, good job with this - I think you've made a good effort but there is definitely scope for some improvement. I am unable to access your GitHub repository so I am providing this feedback visually & with access to the dev tools:

  • There does not appear to be a max width on your card in rem - instead it is set to 60% which makes the card incredibly large on bigger displays, which isn't good.
  • As this happens, the profile picture and author's name overflows out of the card with the text also scaling incredibly large - given you have a font size set in vm. I do not see why you have the font size set in vm which is a percentage of the viewpoint width. I would recommend using rem for your fontsize, which scales with the user's browser default.
  • On mobile, there appears to be a significant amount of white space at the bottom of the card. I can see you are utilising flexbox with flex-direction: column - however there appears to be no use of justify-content or align-items which could have created the required spacing between these elements, such as the use of space-between.
  • On pressing the share button in mobile view, there is no button visible which allows for it to be toggled away again.
  • There also appears to be no max width on the image, which will continue to scale so large or so small (to the point that little of the image is visible) as I switch to mobile view which is quite a problem for this responsive design.

  With a few improvements, this design will be much better. Remember to allow access to your Github Repository (I am assuming you have forgotten to make it public).

  0