chat-app-css-illustration with Flex

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted about 4 years ago

  This looks pretty cool. Only things I would question are

  • the margin-top on your phone, when you could just have align-items:center on the parent (phone is touching the bottom of my desktop screen on my laptop, so may be a little big too)
  • the fact that you've made the phone a 'section'. That feels wrong as it doesn't contain very understandable document content. I would be tempted to look into figure or just use a div, or at least add some screen-reader only descriptive text.

  I'll have to ask others what they think as far as semantic html inside the phone. It's a strange challenge because I'm not sure you'd want assistive tech to read out all content on the phone screen as it is.... You've given me something to think about there!

  Good job though, it's not an easy one, this!

  0

  ---

  

  Marco•265

  @MarcoCarpoPosted about 4 years ago

  Regarding the margin-top, I had put it in the mobile version to give more space to the phone, avoiding it being in contact with the top of the page. But then I forgot to reset it in the query for the desktop version. For the section tag, I wanted to use it because I read on the web that it describes discrete parts of a document that are somehow related, but I guess I need to study the semantics of html a little better. So section could be used for the description of the phone anyway?

  1

  

  T

  Grace•31,230

  @grace-snowPosted about 4 years ago

  @MarcoCarpo yeah I think section could wrap all this content tbh... But I'm really intrigued as to the best html to use for the phone screen design. I can't decide on that one... Feel like it needs some research! 😂

  1