Hi,
This looks and works great on mobile, well done!
The html isn't valid at the moment but could be remedied quite easily by doing something like
<h2 class="faq-button">
<button class="question">
How many team members can I invite? <img class="button-icon" src="./images/icon-arrow-down.svg" alt="">
</button>
</h2>
<p class="answer hidden">
You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
</p>
That would maintain/improve accessibility and fix all those html errors in your report. Hope that's helpful ☺
In terms of your css, I wouldnt nest at all except when I have to. So I might look for the presence of an is-open class on the parent of an faq answer, or I might nest things like hover states and pseudo elements, but I wouldn't nest anything else. It increases specificity unnecessarily and can cause problems later on in bigger projects.
@MiaSinger
Posted
@grace-snow Hi Grace, thank you so much for your answer! I could correct the HTML errors so now my report is down to 0. :) Thank you also for your comment on nesting: I reviewed some past projects and I tend to nest quite deeply. With your answer, I also googled around a little and it seems to be a quite controversial topic: https://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/ https://medium.com/@lakesare/deeply-nested-scss-is-good-42fc7305f12b
since I tend to nest a lot, I will for now challenge myself to nest less ;) Thanks again for your great answer!
