mobile first, HTML, SCSS, JS

Community feedback

• 

  Yinon Hever•835

  @yinonheverPosted almost 4 years ago

  Nice solution. I love how you dynamically adjusted the max-height animation

  0

  ---

  

  Michelle•415

  @michellerachoPosted almost 4 years ago

  @yinonhever thank you, I appreciate it!

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, michelle! 👋

  Nice to see you complete another challenge! You've done a nice job on this one! 👍

  Your solution looks good, is responsive, and the accordion card works well! 👏

  I only suggest,

  • Using absolute positioning to position the floating cube relative to the entire accordion card itself (in the desktop layout) so that the cube doesn't move around too much when the page is resized.

  Keep coding (and happy coding, too)! 😁

  0

  ---

  

  Michelle•415

  @michellerachoPosted almost 4 years ago

  @ApplePieGiraffe thank you for the feedback!

  I tried to do that but since I set the container to overflow: hidden the cube wouldnt overflow beyond the container. I also tried to omit the overflow: hidden from the container and add clip-paths to the illustration but then that didnt work well - I didnt like how the illustration doesnt cover the entire height when the accordion expands.

  I couldnt figure out a better solution so I had to compromise to a floating cube 😅 . Do you have any suggestion? 👉👈

  0

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  @michelleracho

  You can wrap the accordion and floating cube in a container that is the same size as the accordion (which shouldn't be hard, since the container will be sized according to its content), and then use absolute positioning to place the floating cube relative to that container. That way, the floating cube should always stick to the left side of the accordion and it won't be cut off when you set overflow: hidden on the accordion itself. 😉

  0

  

  Michelle•415

  @michellerachoPosted almost 4 years ago

  @ApplePieGiraffe that worked!! thank you 🙏 you're awesome! no more floating box for me 😂

  0