@RayaneBengaoui
Posted
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.
@TrakaMeitene
Posted
@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.
@RayaneBengaoui
Posted
@TrakaMeitene Nice it works perfectly now ! 🥳
Have a nice day 🌞
@TrakaMeitene
Posted
@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. :)
@RayaneBengaoui
Posted
@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
.kubsclassposition: absolute, I saw that you already did this step. But then, we want to make it relative to your.windowclass, so we have to wrap it inside thewindowdiv that will containposition: relative. -
You are using
marginto position your cube, here it's better to use properties such astoporleftas you declared aposition: absolutebefore, it will be easier. So you can remove all themargin-topandmargin-leftfrom.kubsand the media queries. -
Now, we can replace it with
left: 0andtop: 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.kubsto 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 theoverflow: hiddenof.windowbut 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: hiddenon the.windowclass, we will remove it. Now both images are overflowing, therefore, we can addoverflow: hiddenonly to the.imagesclass 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 🙂
@TrakaMeitene
Posted
@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! :)
