error
Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">Design comparison
Reports
Accessibility report (17)
error
Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">error
Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">error
Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">error
Images must have alternate text
<img src="./images/icon-arrow-down.svg" class="arrow">error
<ul> and <ol> must only directly contain <li>, <script> or <template> elements
<ul class="questions">warning
All page content should be contained by landmarks
<img src="./images/illustration-box-desktop.svg" alt="" class="box">warning
All page content should be contained by landmarks
<img src="./images/bg-pattern-desktop.svg" alt="" class="bg-img-desktop">warning
All page content should be contained by landmarks
<img src="./images/illustration-woman-online-desktop.svg" alt="" class="woman-desktop">warning
All page content should be contained by landmarks
<label for="team-members" class="questions__label">
<p>How many team members can I invite?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>warning
All page content should be contained by landmarks
<label for="max-upload" class="questions__label">
<p>What is the maximum file upload size?</p>
<img src="./images/icon-arrow-down.svg" class="arrow"></label>warning
All page content should be contained by landmarks
<label for="password-reset" class="questions__label">
<p>How do I reset my password?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>warning
All page content should be contained by landmarks
<label for="subscription" class="questions__label">
<p>Can I cancel my subscription?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>warning
All page content should be contained by landmarks
<label for="support" class="questions__label">
<p>Do you provide additional support?</p>
<img src="./images/icon-arrow-down.svg" class="arrow">
</label>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="#">Jaron Paige</a>.
</div>Jaron Paige’s questions for the community
A big struggle (and one that I didn't come to a solution on) was how to position the images such that:
a) they were positioned with respect to the card b) they maintained position relative to each other c) they maintained position in a responsive way d) one of them had overflow and the others did not
Otherwise, fun project and it made me tackle making an accordion without using a framework or JS.
Community feedback
Ken• 975
@kenreibman
Posted
Great job! You're so close to the final result, and I commend your hard work and effort :)
On the desktop layout for the left illustration section, this project requires multiple layers that act as a position: relative, in addition to uses of z-index, and the illustration ends up being an position: absolute that doesn't get hidden by the main card container.
It might be hard to see, but take a look at my code or any Youtube video that covers this solution.
Your viewport width at 375px has the card overflowing. Although I haven't checked your actual code, this is due to you setting fixed heights such as using the height and width property. I would recommend you using max-width for containers and min-height for your parent body elements to establish a height.
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!