@wendyhamel
Posted
Hi Marina, Good job taking on this challange! You are right, making this one responsive is complicated.
The smooth transitions for the answers is a problem. You can't transition dynamic height (height:auto), it needs absolute values. You can tinker around with it, but I often end up with it still beeing a bit janky.
The position: static is the default position for all elements, if you don't specify a position yourself. To make this work in this challange you will need to work with position:relative and position: absolute. The element (a div for example) containing the image should have position:relative for the image with position:absolute to work.
In this challange you will need two different locations for the two different images to show properly on different screen sizes.
If you like to improve some more, you could work on the accessibility. If you use more semantic HTML elements, your solutions will be better accessible for screen readers and by keyboard.
A <ul> with <li> items for example to show the questions and you could use the <details> element for the separate questions.
Good places to learn:
mozilla
- about position
- about transition
- about accessibility
- about the details element
css tricks
I do not want to reveal too much about how you could do this, it helps to figure out your own approach. But if you get stuck, Keep asking questions and don't give up!
