Responsive FAQ page using Flexbox, Positioning and Figma

Community feedback

• 

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  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. 😊

  Marked as helpful

  1

  ---

  

  Kasra Tabrizi•300

  @KasraTabriziPosted over 2 years ago

  @DarrickFauvel Thanks a lot for your reply. I will make the necessary changes.

  1
• 

  P

  Darrick Fauvel•490

  @DarrickFauvelPosted over 2 years ago

  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! 😊

  Marked as helpful

  1

  ---

  

  Kasra Tabrizi•300

  @KasraTabriziPosted over 2 years ago

  @DarrickFauvel Thanks a lot! I didn't know this one.

  1