HTML, CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Really nice solution here, well done.

  Only problem is these lines are problematic

  width: 320px;
  height: 497px;
  

  That width is causing the card to hit screen edges on my phone. To fix it, change it to max-width (Or max-inline-size)

  The height should be removed altogether. You could use min-height if you really want, but in general you can let the content guide how big a height the browser paints

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Other tips

  • try to use rem more instead of px, including for margins
  • add classes to what you want to style directly rather than nesting selectors where possible to keep your css specificity low
  • use margin to create vertical space between low level elements like headings and paragraphs (that's not what padding is for)

  Marked as helpful

  0

  

  Steven Palfreyman•40

  @steveWhoCodesPosted almost 3 years ago

  @grace-snow

  Thank you so much for the feedback! I truly appreciate any advice given to help me become a better version of myself. And I learned a new trick, max-inline-size! Going to have to look into that one.

  0