Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first layout using Sass

@FelipeDecome

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions are welcome.

Community feedback

David Omar 580

@davidomarf

Posted

The final result works flawlessly.

I like the animations of the social buttons.

I was wondering why did you use border-radius as a mixin, instead of using the plain property, but then looked at the cross-browser file. I didn't know border-radius had to be treated like that before seeing your code, haha.

I have only one tip:

Instead of setting the border-radius for the child components, just set it in the parent, and hide the children overflow with overflow: hidden.

The 'complexity' reduction is not very much noticed in here because you don't have that many children, but knowing it may save you multiple border-radius: x x x x; in the future.

2

@FelipeDecome

Posted

Thanks @davidomarf, i thought the layout needed some animations, i was bothered about everything being static.

About the tip: I actually set the overflow:hidden; in the main container with border-radius first, but the share options didn't overlap the main container even with position:absolute;.

If you have any solution for that i would appreciate it.

I am really glad you gave me your feedback!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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