When I started this project, I had no idea that it was impossible to grow the accordion smoothly in css between height: 0 and height: auto. This is the part where I spent a lot of time finding a solution that I hadn't anticipated.
To challenge me, a parallax effect on the shadows. For the mobile version, the effect is triggered when scrolling. And for the desktop version, the effect is triggered when the accordion expands.
Well this is what I call "going further than what is requested" ! That's awesome, that's so neat. I am a stranger to React and ignored it would be useful for this kind of projects. Did you use "high level" React or would it be something that a beginner in React could achieve without too much hair pulling ? Great work !
It's not working on desktop. How can I make it responsive?
Hi there :)
From what I can see, here are some hints that might help you : -- you used position: absolute on your illustration without declaring any parent container as position: relative. Meaning that your image has an absolute position based on the "position" of your body. That's why on desktop, your image is 45px from the right side of the window, and 12px from the top of your window. If your plan was to use position absolute to place your image on the top of your wrapper, then you would need to declare position: relative on your wrapper container.
-- instead of using position absolute to position your illustration, try to use margin-top instead, by declaring a negative value. Something like -100px worked quite well when I tried in my browser.
-- the "easiest" way to make your layout responsive is to use flexbox for desktop version. For this to work, inside your wrapper you will need 2 container : 1 for your illustration and 1 for the rest of your content (h1 + your onefaq divs). Then you can declare your wrapper as flex, which should get your illustration just next to the rest of your content. Then you need to play with flex position a bit to get what you want.
-- Once you're comfortable with flexbox, you can improve your code and css by building your onefaq div with flexbox as well. This means that instead of using position: absolute for your icon-arrow-down, you use flexbox to control its position.
My advice would be to learn a bit more on flexbox (have a look on css tricks website) and try again this challenge. You'll see that your life will be much more easier than with absolute positioning :)
Flexbox, grid layouts and declaring width with % instead of with px are some of the best ways to achieve responsive layouts.
Good luck !
Please give your reviews. Thank you.
Hello Elelu, The overall design is here, good job ! You can improve your solution with quick improvements :
Hi Rutwik1801, that's great work ! I can see that the picture is a bit too narrow though - compared to the design. I guess the proportion of your main content (image + text) should be re-balanced a bit, maybe 40% for the image and 60% for your text. Not sure how you manage to get proportions in case you did not have the Sketch file. On my side, I use Figma (free tool) to measure space between elements. It's not pixel perfect since the design is in .jpg, but at least I can get a better idea about space and proportions. Keep up the good job :)
