Design comparison
Solution retrospective
This took me much longer than I thought purely because of the image. I struggled to position it correctly and still do not have the correct position for the mobile screen size, so any feedback in how this could be done better would be very much appreciated!
Community feedback
- @adarshcodesPosted almost 4 years ago
Hi👋 @AlexGanderton, Your solution looks good to me. You can improve a few of the things:
- You can add a transition so that the opening of the desc would be smooth.
- Take care of the suggestion that @LuisDGracia has given above.
- While checking responsiveness I noticed the FAQ text missed before breakpoint 1000px. Good Work. Keep it up👏. Happy Coding
1 - @ArshKarpoorPosted almost 4 years ago
Hello Alex
This is very nice
1 - @LuisDGraciaPosted almost 4 years ago
Hi, first of all, you don't need to set the body's height to 100vh, that could ruin the design in the long run but if you want to have 100vh you can use min-height, the body still has all the viewport height but if the content exceeds, you'll get a scroll, that's why your mobile version looks weird.
On the mobile version, the image overlaps the FAQ title, instead of using a position: absolute;
since all the image fit inside the container, you could use a flex-box to fit all the content without overlapping
0@AlexGandertonPosted almost 4 years ago@LuisDGracia Oh right I see. Okay I think I will have another go at it and take on this advice. Hopefully it will help a lot. Thanks!!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord