Design comparison
Solution retrospective
I'll just say one thing don't do lazy coding, if you're gonna build something, build right or leave it. I really spent a lot of time refining this code, maybe more time than the first build. I need help please review the code and tell me what's wrong.
Community feedback
- @SasaVaticPosted 12 months ago
Hi Mostafa Mohi, Your solution is very nice. Two things that I would change as if I was one writing css. I Would not use relative position for .feature-logo. You can position it with padding or margin. I would do something like this to escape overflowing:
.feature-logo { margin-left: auto; ---> add display: block; ---> add /* position: relative; */ ---> delete /* top: 20%; */ ---> delete /* left: 75%; */ ---> delete }
And for div I will exclude fixed height. In this case it is not mandatory. But what if in the future you add some extra text. Text and .feature-logo will overflow their div parent if their content height is larger then parent height.
div { width: 100%; max-width: 400px; /* height: 250px; */ ---> delete padding: 30px; border-radius: 5px; box-shadow: 10px 4px 30px var(--shadow-color); }
That is my brief summary. If you have any more questions feel free to ask. Good luck Mostafa :)
Marked as helpful1@mo-oePosted 12 months ago@SasaVatic , this is very helpful, at first I was wondering why my text and logo are overloading outside their parent div, now I figured it out "because of fixed height" thanks to you. Thank you very much for this input :)
1
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