Simple responsive card using media quer

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  Hi

  Try to improve the html on this

  • use landmark elements like main
  • use a heading element
  • use img srcset or the picture element for the image
  • use an unordered list with 3 items for the stats
  • remove brs, use a span set to display block wrapping the word or number, no need for brs

  This will set you a good foundation

  It's good practice to use a css reset at the start of css every time. That would do things like change images to display block instead of inline block. That will fix the slight gap I see under the image on mobile.

  Good luck

  2

  ---

  

  T

  Grace•31,090

  @grace-snowPosted almost 3 years ago

  Some really quick css tips

  • never ever have font size in px. Use rem
  • no need for the pseudo to use mix blend mode. You can just have the background color on that half of the card
  • you'll have better control letting things be 100% wide and using max-width in rem. If you use % widths all the time on bigger projects elements will gradually end up misaligned with each other
  • no need for large margins. Just use flex or grid to center content on the page, along with either a little margin on the component or padding on the wrap ung element to stop content hitting screen edges

  Marked as helpful

  1

  

  P

  Hemanathan H P•170

  @hphemanathanPosted almost 3 years ago

  @grace-snow Thanks Grace will follow the tips

  0