Ping Single Column Coming Soon Page using Flexbox and JavaScript

Community feedback

• 

  T

  Grace•31,330

  @grace-snowPosted over 2 years ago

  Hi

  To fix that I think you need to

  • have hidden attribute on the error msg by default in html
  • have aria live attribute on the error massage by default in html
  • in js remove the aria invalid altogether, I don't think that should be on error msg at all
  • in js when it's valid, return to original state - remove error class, re-add hiddens to msg

  You're very close here I think it's just not quite finished yet ☺

  1

  ---

  

  Chantae•320

  @taepal467Posted over 2 years ago

  @grace-snow Thank you so much for the feedback. I will make sure to use this for reference. I have actually tried removing the error -msg attribute but for some reason it would not show even if there was an error.

  0

  

  T

  Grace•31,330

  @grace-snowPosted over 2 years ago

  @taepal467 make sure you check this on small phone screens too. I'm.seeing a lot of overflow on mobile

  0

  

  Chantae•320

  @taepal467Posted over 2 years ago

  @grace-snow Yes I just now became aware of that issue myself. I thought I understood how to use mobile-first workflow. The max-width and min-width confuses me a little. I definitely need to practice more and looking at tutorials on how to make the web browser mobile friendly.

  0

  

  T

  Grace•31,330

  @grace-snowPosted over 2 years ago

  From looking at the code I can see a few issues

  • the input has no label. It's no good wrapping an input in a label tag with no text, usually that technique is onky used for radios and checkboxes as they have text within them
  • font size must never be in px, use rem
  • input should not have a width and height. Same with button. Width 100% would be ok. Use padding inside input.
  • no idea why you've got lots of negative margins. That's creating a load of work for the browser and doesn't seem necessary. Is it because you're trying to mitigate against default browser styles perhaps?
  • don't style on IDS. Add classes to those elements and style on those instead
  • check where you're using padding vs margin and units like em vs rem. Em should only be used very intentionally when you want it to inherit from parent font size
  • next time make mobile the default styles and use min width media query. Your code will be much shorter and more performant that way. As it stands with this desktop first approach you have to work harder to override the styles

  0