Latest solutions
Latest comments
- @Msarthaksharma@ms097530
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 helpful - The outer
- P@jgreen721@ms097530
What I did for handling spacing of the credit card number was add an event listener for 'input' where I removed spaces from the current input value and added spaces back in at appropriate locations. Since the 'input' event fires on deletion (single or multiple) and copy-paste it also formats appropriately at those times. Please feel free to check out my submission if you'd like to check it out - I think it worked pretty well. I've added comments for clarity, but if you decide to check it out and have questions please feel free to ask.
Cheers, Mike
Marked as helpful - @yallsobad@ms097530
As far as CSS goes, I would recommend approaching the styling from a mobile-first perspective. This can simplify the layout as oftentimes the styling for the mobile version overlaps with the default styling in the browser (i.e. stacking content in a single column). I think this will help with your feeling of having to rewrite everything to structure the mobile version.
I think it would also be helpful to create a single error class since each error class has the exact same styling. You could give each error a class of error and instead assign them ids for ease of selection in JS. If you're looking to get rid of the form text shifting when an error occurs you could replace
display: none;
withvisibility: hidden;
as this will reserve space for the content but make it invisible until changed tovisibility: visible;
.Cheers, Mike
Marked as helpful - @GrahamTheobald@ms097530
Hi Graham,
The structure of the HTML looks fine to me, though it may be worth considering using
section
tags in place of the outermostdiv
tags. Instead of using two separate inputs for MM and YY I would advise using the fieldset as it is made for grouping inputs together.I found moving to a mobile-first approach helped me structure my styling more effectively. The reasoning is that if you approach the layout from a mobile-first perspective you will often be able to keep much of the default styling (i.e. content stacking to form a column) and then simply adjusting from there for wider screens. This may help you tidy up your styling and make it feel less complex.
Cheers, Mike
Marked as helpful