Responsive preview card component using HTML and CSS

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 3 years ago

  Hi @Li-Bee

  I'm afraid the html on this needs changing, it doesn't make sense at the moment and would have a really bad effect on assistive tech and search engines (might be useful for you to read too @darryncodes)

  • a header element doesn't go inside main, it's a separate landmark. Technically you can have headers and footers inside articles, but assistive tech users generally dislike that as it clutters up what is announced to them on the page and can be confusing when using landmarks to navigate.
  • similarly article doesn't make sense for only part of this content. If using article it needs to be the whole component, heading, text and image. They all belong to the same one component.
  • if announcing an image as valuable content like you are doing here never use a div, use an img element, that's what it's for. The image should be in the html if it's deemed meaningful.
  • by using css grid for the stats you've broken their meaning. Each number-word pair needs to be read together, which means they need to be in the same meaningful element as each other. The best semantics I can see for this content would be acheived by an unordered list containing 3 list items. Inside each list item the number can be wrapped in a span or strong tag set to display block via a class. That means you wouldn't be able to use grid as planned (annoying I know)

  Layout-wise I'm seeing a few strange things viewing on mobile (ill add Screenshots to slack so you can see what I'm seeing)

  • the card is touching screen edges. Usually you mitigate against that with some padding on the outer wrapper, or you could add a little margin on the component itself
  • the card is showing up about halfway down the screen on page load. That just looks strange
  • on mobile landscape the view has switched to desktop layout already so the image becomes all squished. Make sure your media queries kick in at the point where there is room for the layout to change

  I hope this helps ☺

  25

  Marked as helpful
• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi LiBee,

  Your solution looks really good - well done on this one!

  • you've almost got the purple overlay perfect. i'd remove the opacity on the linear-gradient background-image: linear-gradient( to right bottom, rgba(170, 92, 219), rgba(170, 92, 219) ) and add background-blend-mode: multiply;
  • grid was a good choice for your stats layout, nice one. Gap is a really useful option whilst using Flexbox but you just need to be careful as it's not adopted by all browsers yet
  • you could clear up your accessibility report if you change your <section> tag to a <main> tag and use <article> or a <div> for where your <main> tag is now

  Keep coding!

  14

  Marked as helpful