-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add FAQ with toggle logic #15
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/julianblohm/hotspotornot/abbx9czi2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Your code looks clean, nothing much I can comment on. Mainly had pointers on using px instead of % in width, height, margin and padding. Seeing there are different sized phone screens it could help you cover several different kind of phone layouts, without any extra work. Especially if you want to implement horizontal view as well later on. :)
Tested the app on my phone (have a quite small phone) and something that I noticed is that when I open your FAQ's on the first page it opens them up downwards (which is not bad) but when I open the 2 last ones I they open up so that I can't see them on the screen and have to scroll down to see the answer. Not sure if there is an easy way to fix this but could be a nice feature to make the app "automatically" make the answer completely visible on the screen. :)
display: grid; | ||
grid-gap: 20px; | ||
background: var(--silver); | ||
grid-gap: 40px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you thought about using % or some other more scalable value here in case you want to make a desktop version of the app as well? In case just focusing on mobile, maybe does not make sense but could also adapt the layout more naturally to different phone screen sizes. :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for your review!
Definitely I will easy adjust responsiveness for other phone sizes and desktop later on.
Just focused on other things first. :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hahaha! When you said, this one is small, you ment it :)) Looks good though 👍
@@ -33,28 +33,21 @@ function FAQ() { | |||
{questions.map((question) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could destructure questions but I'm only writing this, because I didnt find anything else :))
width: 100%; | ||
justify-content: space-between; | ||
align-items: center; | ||
padding: 10px 10px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldnt padding: 10px;
be sufficient?
Added the FAQ data and integrated the questions with toggle logic to show answer.