Design comparison
Solution retrospective
Hi Guys, I tried using help from youtube, Shoutout to https://www.youtube.com/watch?v=YfQhEORL8Yg @Irvine-- If you check my solution please comment I have few doubts to clarify from you. It was not a difficult challenge but being a beginner to JS it was complete out of box task for me. All the suggestions are welcome and please help with good resources to learn JS.
Community feedback
- @ms097530Posted about 2 years ago
Hi Sarthak,
One thing I would recommend is breaking each individual notification into sections. For example, the first notification could be like this:
<div class="flex"> <div class="avatar"> <img /> </div> <div class="content"> <p><span>Mark Webber</span> reacted to your recent post <span>My first tournament</span> today!</p> <p>1m ago</p> </div> </div>
So, breaking this down:
- The outer
div
hasdisplay: flex;
(symbolized by the class), which causes the nesteddiv
tags to form a row by default. - The content inside the nested
div
tags is still laid out as normal, within the space allocated to them by flexbox. - Since the inner items are still laid out normally, the two
p
tags stack on top of each other as they are block level elements. This means that no matter how much content is in the firstp
tag that gives notification information, the timestamp in the secondp
tag will always be below it.
This setup allows you to break the flexbox
div
into sections horizontally and then put what content you want inside those sections so that the sections are self-contained (i.e. the notification info won't flow under the avatar when screen size changes) and block level align uniformly (i.e. the twop
tags line up along the left edge at all times).That was a bit of a long-winded explanation so if you need any clarification please feel free to ask. Also feel free to look at my solution since I used the same sort of approach I explained above.
Cheers, Mike
Marked as helpful0@MsarthaksharmaPosted about 2 years ago@ms097530 I will definitely implement it to future projects. Thank you for your wonderful feedback.
0 - The outer
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