Mobile first HTML + CSS using BEM and media queries - 375px and 1440px

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi

  The main question here is why add a hover effect to the cards at all? A hover is always to indicate interactivity so should only be used on interactive elements.

  Other feedback is

  • icons are spilling out of the cards for me on mobile, test on more screen sizes, including landscape
  • font size must never be in px, always a relative unit
  • if you want to use BEM naming research more, especially how to indicate modifier classes vs child classes

  Good luck

  1

  ---

  

  Alexander•200

  @IcEWaRRiOr01Posted over 3 years ago

  @grace-snow Thanks very much for feedback! I added hover effect, because I thinked that is beautiful when card are raise on hover... And thanks, I just now understood that I need adaptation for more screen sizes, than 375 and 1440 pixels...

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @IcEWaRRiOr01 the thing is, hover means something. It is not about what looks beautiful. There are other opportunities to add animations into challenges but doing this harms usability. I would be trying to click and thinking your site is broken.

  If you wanted cards to hover, they would need to contain a link. That would have the hover effect, on a pseudo element taking up the space of the card to trigger the effect. But there has to be an obvious link that looks clickable inside each card for it to make sense. This content does not have that or indicate a link would be present

  1
• 

  Nicolas•10

  @LeTailleCrayonPosted over 3 years ago

  Hello, The design and the solution don't match !

  0

  ---

  

  Alexander•200

  @IcEWaRRiOr01Posted over 3 years ago

  @LeTailleCrayon yes, on screenshot solution and design are don't match. I think, this happened because with "transition" blocks are "move out" from edge of screen, and the screenshot was taken during moving. Look to preview site - on width 375px and 1440px solution and design are match. I don't know how to remove "moving out" effect, when I add "transition" property for blocks in CSS

  0