Responsive layout faq card with JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋 Hi Esther Guo!

  I would like to answer your questions:

  1. Since your img (the illustration-woman-online-desktop) has max-width: 100%, I think the img is trying to have full width on its parent element which is div.imgs. If you remove that div it will inherit the width of the main element.
  2. I guess there's no way to make those images keep in their place since the parent element height depends on the content inside it. But, you can minimize the effect by creating a function that only allow the user to open one accordion panel at a time.

  I also have some feedbacks:

  • On mobile landscape (640px * 360px), your solution doesn't responsive. Keep in mind that mobile has landscape mode!
  • Your accordion can't not be access with keyboard (pressing Tab to move to another accordion panel and pressing Enter will toggle the accordion panel) and screen reader.
  • To reduce the amount of JavaScript and HTML code, try to use details and summary tag. Also by using the those tags, you are already creating accessible accordion.
  • Never use id for styling and inline styling through JavaScript, it's a bad practice nowadays, since you're increasing the specificity unnecessarily. Use classes for any elements that you want to style or manipulate through JavaScript.
  • I don't recommend to change the root or html font size, since you don't need to change it and it can cause a lot of issues that the world might not know yet. Here what an accessibility expert (Grace Snow) has said about this.(original comment)

  Yeah, I would never resize html/root font size down to 62.5% mainly because it is completely unnecessary, and it carries risk. You are correct you can mitigate against the accessibility issues by scaling the font size back up with 1.6rem on the body, BUT

  • not all elements inherit font size from the body so you have to remember to manually scale up them as well
  • you need to do extra testing for that reason
  • any rem sizes on third party components or plugins you bring in will need loads more overrides
  • because you’re changing an established default, you cannot guarantee it will work correctly for everyone on every device, operating system, browser and tech set up*

  Basically it comes with a lot of risks for almost no benefit.

  There is no reason 1rem needs to equal 10px. As soon as you start thinking entirely in REM - building for alignment, proportionality and spacing - rather than thinking in pixels, the whole point disappears.

  That's it! Hopefully this answer your questions and helpful!

  Marked as helpful

  1

  ---

  

  Esther Guo•40

  @Esther-GuoPosted about 3 years ago

  @vanzasetia Ohhh there are a lot going on 😆 I’ll go over your suggestions one by one and would definitely learn so much from them. Thank you so much for sharing your knowledge. Really appreciate it!

  0