Design comparison
Solution retrospective
Hi all, first of all thanks for the platform and support.
Well, I have used Angular to create components in some visual entities for reuse them as much as possible.
Grid was used for positioning the two main design with Media Queries as well. Then, I made responsive components flexing them with Flex.
Mainly, I did the phone & comments playing with shapes in Css and positioning them through margins, positions, relative units, etc.
One thing I really struggled was the creation of effects delayed with interpolations in Sass. In fact, I haven't learnt yet if it is possible to know how many elements are belonging to a class (See src/app/phone/phone.component.scss L43 ). My idea was to get this parametized
@for $i from 0 through 7 {
==>
@for $i from 0 through NUMBER_OF_ELEM_WITH_CLASS {
Can anyone know how to do that?
Anyway, I have tested on Chrome & Firefox. Finally, I checked with a real IPhone 7 where I found problems related with scroll, although I was able to solve.
Any feedback would be really appreciate it, many thanks.
Community feedback
- @ApplePieGiraffePosted almost 4 years ago
Hey, Karim A C! 👋
Good job on this challenge! 👍
Your CSS illustration looks good and your solution is responsive! 🙌
I suggest,
- Decreasing the space between the CSS illustration and the text of the page and setting the
text-align
property of the text tostart
in the desktop layout of the site (to match the original design more closely). - Not immediately switching to a mobile-friendly layout right at 1440px since your solution still has plenty of space to accommodate the desktop layout for a few hundred pixels after that.
- Making sure the text of the page doesn't get hidden behind the CSS illustration on screens with small viewport heights.
- I'm not familiar with Angular JS, but I used CSS to create the messaging animation for this challenge. It's easy to create a simple animation for all of the messages and then set different
animation-delay
times for each message. You can do the same thing in Sass, of course, without any trouble.
Keep coding (and happy coding, too)! 😁
2 - Decreasing the space between the CSS illustration and the text of the page and setting the
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