Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS, JQuery, responsive design

@XavierGM23

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! Just one question, How can I make an image stay in the same position even if its size changes? Hope you like it, if you have some tips i really appreciate that :) 👨‍💻🙌

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, again, Xavier Guzman! 👋

Your solution looks good, responds nicely, and the accordion card works well! Those animations you added to the floating cube and hero illustration are a nice touch! 🤩

I only suggest,

  • Adding a hover state to the FAQ titles (as in the original design).
  • Taking a look at your solution report and trying to clear up some of the errors that are there.

As for your question about positioning and sizing images, I think it really depends on how you added the image to your page (e.g., directly into your markup or using CSS background images) and there are various ways of making sure images don't move all around even when their size changes (but that also depends on the content that is around them). If the content around an image doesn't change, the image should remain in its place even if it is resized (or you could use absolute or relative positioning and specify some exact values for how far to the left or bottom of the page the image should be positioned at all times). Your positioning of the images in this challenge looks fine to me, though. 😉

Keep coding (and happy coding, too)! 😁

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord