warning
Heading levels should only increase by one
<h3 class="normal">How many team members can I invite?</h3>Design comparison
Reports
Accessibility report (12)
warning
All page content should be contained by landmarks
<img class="img bg" src="images/bg-pattern-desktop.svg" alt="bg-pattern">warning
All page content should be contained by landmarks
<img class="img cube" src="images/illustration-box-desktop.svg" alt="">warning
All page content should be contained by landmarks
<img class="img woman" src="images/illustration-woman-online-desktop.svg" alt="">warning
All page content should be contained by landmarks
<div class="question">
<h3 class="normal">How many team members can I invite?</h3>
<img class="arrow-down" src="images/icon-arrow-down.svg" alt="icon-down">
</div>warning
All page content should be contained by landmarks
<div class="question">
<h3 class="normal2">What is the maximum file upload size?</h3>
<img img="" class="arrow-down" src="images/icon-arrow-down.svg" alt="icon-down">
</div>warning
All page content should be contained by landmarks
<div class="question">
<h3 class="normal3">How do I reset my password?</h3>
<img img="" class="arrow-down" src="images/icon-arrow-down.svg" alt="icon-down">
</div>warning
All page content should be contained by landmarks
<div class="question">
<h3 class="normal4">Can I cancel my subscription?</h3>
<img img="" class="arrow-down" src="images/icon-arrow-down.svg" alt="icon-down">
</div>warning
All page content should be contained by landmarks
<div class="question">
<h3 class="normal5">Do you provide additional support?</h3>
<img img="" class="arrow-down" src="images/icon-arrow-down.svg" alt="icon-down">
</div>warning
All page content should be contained by landmarks
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>Community feedback
Ken• 975
@kenreibman
Posted
Great job! I like your use of jQuery on the accordion.
Initially your design looks great, but your entire card starts to fall apart when the viewport width starts to get smaller. I have a few suggestions...
- I believe you are having these issues because you are giving your containers a fixed
widthandheight. Giving fixed dimensions like that lead to lots of responsiveness issues. Instead I would start usingmax-width, and useremunits instead ofvhandvwfor setting container dimensions. - I also highly advise you against declaring a set
height, and let your content expand on its own. Very rarely do I set a specific height for certain containers in my projects. This relates back to your parent element, which is yourbodytag in this case. I would set amin-height: 100vhto make it more responsive. - You might also want to look at your media query breakpoints again, as there is a gap between your desktop to mobile layout where it completely breaks the entire website.
I actually recommend you to take a look at a video of someone completing this challenge on Youtube, or look at my code for the same problem
I hope this helps and keep learning!
Marked as helpful
0
Please log in to post a comment
Log in with GitHub
Join our Slack community
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!