@AgataLiberska
Posted
Hi @karenefereyan! I think this challenge is a lot more difficult than it initially looks, so well done for sticking to it!
I'm surprised to hear that going from desktop to mobile was easier for you as most people (myself included) find the opposite to be true - for me it's easier to do the mobile version and then move elements around on larger viewports. But hey whatever works for you :)
Hope this helps, happy coding!
I think this video does a good job of explaining the position property. And of course, trial and error helps a lot too!
I noticed a few visual issues: first, with the container height set to 80% I get a lot of empty white space on the bottom of the card. May be a good idea to look at that. You could also look at your media query breakpoints - on tablet size, elements are getting cut off a little bit. And on wider mobiles, the image of the woman is not quite centered on top of the card. A great way to center an element positioned absolutely is to offset it from one side by 50% - so here it could be left: 50%;. This will put the left edge of the element in the very middle of the parent (the one with position other than static). Then to move it back to where it's actually centered, set transform: translateX(-50%); - you move it back by half of its own width.
And last but not least - the main issue here really is accessibility. I can't toggle the accordions with keyboard and in general it would be good to make the clicking target a bit bigger than just the arrow. Check out this article about accessible accordions, it helped me quite a lot
