Design comparison
Solution retrospective
I couldn't position the background images as they are positioned in the FEM design, how can I achieve this?
And what do you think could be improved in general?
TIA.
Community feedback
- @A14313Posted about 2 years ago
Make the SVGs position: absolute. Make the parent of blobs to be position relative and you can control the blobs
Make this your markup structure.
<body> <main> .blob1 .blob2 <div class="card"> Your code here </div> </main> </body>Here is my solution: https://www.frontendmentor.io/solutions/responsive-card-mobilefirst-workflow-941q1kZ3Wa
Dont forget to mark this as helpful :)
Marked as helpful1 - @AdrianoEscarabotePosted about 2 years ago
Hi Ahmed Hany, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
these background images are pretty boring auhauhuah I noticed that you did it with the background property on the body! is a good choice, but to have it ends up complicating their control a little since the positioning of the two varies a lot according to the resolution!
I think I would choose to do it with a body pseudo-element, with a position: absolute; in the elements, and relative in the body! it would be easier and more enjoyable at higher resolutions!
The rest is great!
I hope it helps... 👍
Marked as helpful0@ahmedhanyhPosted about 2 years ago@AdrianoEscarabote Thank you so much! Your feedback is greatly appreciated!
1
Please log in to post a comment
Log in with GitHub
Join 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