Responsive card using flexbox

Community feedback

• 

  ChrisEski•110

  @ChrisEski

  Posted over 3 years ago

  Hello saira, first of all good job over there! I'm goint to list my remarks below:

  1. As for the HTML part, i think it's a better practice to use classes instead of ids. By using ids i believe you might mess with specificity, especially in bigger projects.

  2. About the card div, setting the height in 'vh' units makes it to change the card's height as the screen size changes, i.e. for small/normal size smartphones it's probably goint to be ok, but as the screen gets taller and bigger, such as a desktop, you notice that the card height increases leaving the content sticked in their initial position. You want the card's height to stay the same. Maybe you want the width to change with the viewport, but in this project the change is not that big. Plus there is some content overflow as the card height gets smaller than the content height

  3. In my opinion, this card seems to be like a preview card of an article or something, which makes me believe that it would be more relevant to make the image and the title as links, that lead to that specific article or a further info section. Saying this, the cursor should be a pointer on hover to make it clearer that these elements have some functionality. Same with the creator's name, which should probably be a link that takes you to his/her profile or show info about him/her.

  4. Now this is a personal preference, but i think that it makes for a better experience if you give the hover effect a smoother transition.

  5. Last, since you are working on scss (which i am starting to love), consider dividing your style code in partials and use some more of the nesting thing, cause this is where sass really shines! It will make your code cleaner, more organized and easier to refactor/debug in the future.

  These were my humble notes on your project. Hope i helped just a liitle bit there... :)

  03

  Marked as helpful