Article preview component

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @rrgmon! To get that small triangle, you can create a pseudoelement (::before or ::after) and use border styles to get the right shape. Here's an article about creating triangles with border styles

  Other than that, I would revise the media query breakpoint - I think you should go from mobile to desktop design a lot earlier than at 1440px. I'm also not sure about % as unit to set the height and width of the card - I think on smallest mobiles and larger desktop sizes it makes the component not look it's best - elements either get too small or too spaced out. I think here, I would just set a bit of a margin to make sure there's always some space around the card and only set max-width values (different for mobile and desktop). You probably won't need to set max-height, just let the content fill up the space that it needs. Nice work on centering your component with grid property!

  Hope this helps, let me know if something isn't clear :)

  Marked as helpful

  1

  ---

  

  Rohit Regimon•60

  @rrgmonPosted over 3 years ago

  @AgataLiberska Hey, thank you for your reply! I did not think of the pseudo elements! I'll give it a go and let you know if I run into any issues!

  Also yes, I should work on my "responsive skills"! I usually go step-by-step with the media queries, but seems like I missed out here, thanks for pointing it out!

  I need to work on my heights and widths as well! I get too focused on defining fixed widths and heights, and then struggle later, haha.

  0

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @rrgmon no worries, happy to help!

  1