Responsive FAQ card using mobile-first approach

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Good work on that one, regarding your questions.

  1. Well it depends right, when you start first in mobile or mobile first, it would be great idea to use min-width on your break points since it will only scale up. But if you start with desktop view, max-width is the best choice since it will only scale down. I don't usually use min-height and in media breakpoints. Also when some styling overlaps another, make sure that you properly declared your styling in their respective media breakpoints. If you specified any styling outside of it, then it is declared globally and will be inherited by all. Unlike when you set styling in the breakpoints, they will only be run when your dimension is reached.

  2. The reason for that is css specificity. Okay well you declare a font-size to the body right and hoping that it will change the other as well, but, there is a point where you declared in your selector .faq-section.show .answer, this selector the font size. Now what happens is that, when you declare in your body tag, the .answer will not change since it have a higher specificity than the body tag. Because as you can see body compared to .faq-section.show .answer, the latter is more specified right and specificity always win. Reading about specificity will be a great idea^

  3. I think it would be better if you just make it display of block and not flex with a column direction. Because if you set it to block, if the answer appears, it will only change the height or add a height to the bottom and will not make the container shake, since when you display it to flex with column direction, the elements is justified to the center right, so it scales dynamically. So when a question appears, it then adds to the height then the parent will dynamically rearranges it so that they will be centered, therefore makes a shake. I suggest making it block, since block container usually places everything in row, unless a child is inline.

  Well hoping that would clear some questions^^

  1

  ---

  

  Maksym Novikov•60

  @MoranGuyPosted over 3 years ago

  @pikamart Thanks a lot, I will try that!

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @MoranGuy Your welcome on that^

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @pikamart great feedback (as usual)

  As a follow on from that, @moranguy I recommend you read up on css specificity. It's best to keep specificity as low as possible so you have good control of your css. To do that, use single class selectors like .my-class not nested selectors like .outer-parent .inner-parent .my-class

  The only times I nest in scss is when

  • I'm nesting a media query
  • I'm nesting a pseudo element or pseudo state (like :before or :hover)

  It makes results much more predictable

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @grace-snow Thank you for that^

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  I think this works pretty well. It's more usual for users to be able to open multiple expandable sections at once, so this is kind of breaking from convention. It's your choice though, as it's also not usual for expandable sections to sit within a centered card...

  One thing I would definitely change though is making your questions into buttons. They need to be an interactive element so this can be accessible via keyboard and other assistive tech

  On your media query questions, my only advice is to start mobile first (smallest screen size, let that be the base layout), then add min-width media queries as needed as you enlarge the screen.

  Over time you'll find your css will naturally become simpler as you start to learn how to write html and your base styles so fewer changes are required in media queries.

  1

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Re bullet point 2 - why are you changing font sizes at all in media queries? Do you need to?

  1

  

  Maksym Novikov•60

  @MoranGuyPosted over 3 years ago

  @grace-snow Well yea, I think I need to. Because when I’m in a mobile view, let’s say 375x677, I have a font-size of 12px, but when it’s a desktop layout, it’s gonna be tiny. Also, when the screen is too small, I need to use smaller font-size so the text would fit into container normally.

  Also regarding your comment about being able to expand multiple sections at once - I was gonna do it like that, but I realised that I just can’t fit all text in. Would you suggest how can I fix that?

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  @MoranGuy 12px is too small really. Plenty of people won't be able to read text that small.

  If I change font sizes I usually use clamp - maybe look that up.

  For multiple faqs to be able to open I would either place overflow-y auto and a max-height on the wrapper around those faqs so a scroll bar can appear, or let the card grow. I would definitely let it grow on mobile. Probably scrollbar on desktop with this design

  0