FAQ Accordion Card

Community feedback

• 

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  Hei @TSune-web, Good job. I think you did pretty well. If you could point out the particular issue you find then it would be easy to help with that

  1

  ---

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  Thanks, @shameerkamaludeen! Thank you for the advice. I'll be as clear with any issues as I can when they come up.

  For this challenge, I assume the result seems okay, but one of the parts I wasn't sure about while working was that the image kept moving based on the width of the screen, not the card's, when changing screen size, especially from 759px to 375.

  So, maybe for future reference, I'd like to know any discipline or technique that I should keep in mind while working on responsive design.

  0

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  Instead of using a fixed width for the image, I would recommend a relative unit, also if it seems look good make it centre of the card. Instead of the current declarations for the rule '.card__image .illustration-mobile' try below one to check does this work, work around with the position to fix in your design:

      position: absolute;
      width: 85%;
      display: block;
      left: 0;
      right: 0;
      margin: 0 auto;
      bottom: 47%;
  

  this same can be used for that shadow also with little position change. I would recommend looking at my solution where I had done this for reference.

  I got the idea from the following Stackoverflow answer: Center an absolutely positioned element in a div

  1

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  Thank you @shameerkamaludeen! I modified the position of the image by referencing your source code and your suggestion. I had to tweak the vertical alignment a little, but now it looks better and has less messy code :D

  Thank you for the cleaner and better solution!

  0

  

  Shameer Kamaludeen•440

  @shameerkamaludeenPosted over 2 years ago

  glad to let me know, you're welcome @TSune-web

  0
• Account deleted

  hi there,

  • increase the body height to 82 rem

  good job!

  1

  ---

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  @Old1337 Thank you for the suggestion.

  Can I ask why it is 82rem? Is it because the card height is about 41rem and the body height should be double the card height?

  1

  Account deleted

  @TSune-web there is little white space at the bottom and by increasing the height of the body it will disappear

  1

  

  TsuneWeb•260

  @TSune-webPosted over 2 years ago

  @Old1337 Thank you so much!

  1