FAQ Challenge Mobile FIrst

Hey, nice work on this one. Desktop layout looks fine, just needed for the container to be a bit shorter and for it to be centered on the screen properly. For mobile state, a horizontal scrollbar appears and also, the top image is not responding on the size changes.

Others already gave their feedback, just going to add some suggestions as well:

• Always add a styling with:

html {
 box-sizing: border-box;
}

*,
*::before,
*::after {
 box-sizing: inherit;
}

This way, an element's sizing will be properly controlled and using padding or margin will be easier and the padding won't add size to element if it already includes a sizing.

• Instead of using padding-top on the main and padding-bottom on the body tag to center the content, you can use:

  display: grid;
  min-height: 100vh;
  place-content: center;

On the body tag, this way the centering of the element will be consistent and also adding some general padding on the body tag would be nice.

• main doesn't need display: block since it is block element my default.
• Instead of using width on the .container element to give size, use max-width instead. This way, you won't have to declare multiple width for every breakpoint you add just to prevent the user's screen from touching the element since it will be respond on it, compared to width which will just add a fixed width.
• Adding an extra aria-hidden="true" on the img so that it will be totally hidden for other screen-reader.
• For each of the faq question, since you are adding a :hover state on each question, it implies that those are interactive and that's why you should use interactive element like a button or on this one, a better approach without using javascript would be to use details element. It is already accessible.
• The arrow-icon img should be hidden as well and again, interactive components need to use interactive element, making an img acts like button should not be used since img is not interactive.
• For the breakpoint, I think 1000px is too early to show the mobile view, adjusting it would be nice.
• You can remove the width from the .box selector so that the layout won't be stuck at the size when a user have a thinner mobile device.
• Lastly, instead of using:

  left: 45px;
  position: relative;
  top: -185px;
  width: 300px;

You can just remove those and use:

  transform: translateY(" add your value");
  max-width: 300px;

This way, the img will scale.

Aside from those, great job again on this one.

Your solution breaks on mobile. Hope you fix it. Happy coding👍

Hi, this is really great, but the positioning of the images are a bit off, tweaking the positioning would be nice.