Responsive design, GridLayout and FlexLayout, Mouseover interaction

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted almost 4 years ago

  Hi

  This looks OK at first glance, but looking at the code it needs a lot of refactoring I'm afraid

  First the html... At the moment you are using invalid elements.

  • A label is for a form field, nothing else. Use headings
  • in this case the visual buttons would trigger navigation so must be anchor tags
  • images always need an alt attribute. In this case, the images don't need describing to assistive technology, so leave the alt value blank. But alt="" still has to be there, so they know to ignore the image.
  • not a semantic issue, but why do you need an inner div on each card? I don't see why you'd need that from the design

  In css

  • font size must always be in rem/em never px
  • remove all heights, position fixed, position absolute, transform, directional position properties like left top etc. None of these are needed
  • to center content on the page, use grid or flex, not transform
  • instead of percentage width use flex-basis and max width. This will be more responsive and reusable across breakpoints
  • I don't think you need 3 breakpoints for this. One media query should be fine. It's best practice and you'll find css will be shorter and simpler if you work mobile first (using min-width media queries)
  • don't forget to add focus-visible states to interactive elements (the anchor tags when they are added) so keyboard users know where they are on the page

  I hope these tips help

  12

  Marked as helpful