Responsive FAQ page using Flexbox, Positioning and Figma

Also @KasraTabrizi,

You may want to adjust your media query. I am viewing your solution on my laptop which has a screen width of 1366px and I cannot see the desktop layout without zooming out and expanding my viewport to at least 1440px. The actual total width of the "content" in the design is no more than 962px.

Try setting a max-width for your container before using a media query, to be better viewable on small screens. Try something like this:

.your-container {
  max-width: 327px;
}

@media (min-width: 962px) {
  .your-container {
    max-width: 962px;
  }
}

I hope this is helpful. 😊

Hi @KasraTabrizi, 👋

Nice work on this challenge! 🎉

I would recommend setting all of your font sizes to use rem instead of pixels, for responsiveness. I use the :root { font-size: 62.5% } trick. This essentially makes 1rem = 10px. So, a 25px font size is equal to 2.5rem. It makes it very easy to do the conversion in your head by moving a decimal point.

📒Note: This will affect all font size related values. So, you have to adjust them accordingly.

I hope this is helpful! 😊