FAQ card with JS

Community feedback

• 

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  Hello TrakaMeitene,

  Wow ! Already another challenge completed ! 🙂

  In the FAQ section I have to click twice to get the answer displayed. The first click toggles a display: none and the second the display: block. Maybe it should be inverted ?

  Also, for some media queries, the cube is floating in the middle of the container and sliding on the X axis. Lastly, I think the font weight should be lighter to match the design.

  Overall, well done for the challenge, image positioning is not an easy one on this challenge.

  Happy coding ! 😃

  EDIT : I just checked you JS code. First it's better to make a separate file for the JS to keep things clean.

  1

  ---

  

  TrakaMeitene•505

  @TrakaMeitenePosted over 3 years ago

  @RayaneBengaoui I did fixed the JS and made it in to another file. Thank you for your observations.

  I will get back to the design and try to fix it.

  1

  

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  @TrakaMeitene Nice it works perfectly now ! 🥳

  Have a nice day 🌞

  1

  

  TrakaMeitene•505

  @TrakaMeitenePosted over 3 years ago

  @RayaneBengaoui Made some corrections, but still not sure how to fix the Cube floating. If you have any advice, I'll be happy to hear it. :)

  0

  

  Rayane•1,935

  @RayaneBengaouiPosted over 3 years ago

  @TrakaMeitene I think I would position the cube relative to the component so it scales with it. Based on your structure the idea would be :

  • To make your .kubs class position: absolute, I saw that you already did this step. But then, we want to make it relative to your .window class, so we have to wrap it inside the window div that will contain position: relative.

  • You are using margin to position your cube, here it's better to use properties such as top or left as you declared a position: absolute before, it will be easier. So you can remove all the margin-top and margin-left from .kubs and the media queries.

  • Now, we can replace it with left: 0 and top: 50% for example, the image will stick to the left edge and "almost" in the middle.

  • To position it in the center of the Y axis and on the left edge (right now it's close to the left edge, but we want to be on it), we need to add transform: translate(-50%, -50%) on .kubs to subtract half the size of the picture on both axis and thus, have a perfect centering. For now, the image is only half visible due to the overflow: hidden of .window but we will fix this issue right after.

  • Here it can be a little bit tricky, because we want our cube to overflow the container, but on the other hand, we want the other image with the woman not to overflow. So here, rather than having an overflow: hidden on the .window class, we will remove it. Now both images are overflowing, therefore, we can add overflow: hidden only to the .images class and it should be good.

  Now, no matter the size of the window, the cube will be centered on the middle-left of it and adjust ! ( just don't forget to remove all the margins that you added on different breakpoints) 😁

  I hope my comment is comprehensible, let me know if you have any questions 🙂

  1

  

  TrakaMeitene•505

  @TrakaMeitenePosted over 3 years ago

  @RayaneBengaoui I appreciate your effort. Now the transform property will be in my mind for long time. It does work . But it is walking on the Y axis. Suppose I should play with top measurements.

  Thank you very much! And have a nice Day! :)

  0