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

Fylo solution with flexbox, absolute positioning

Pierreā€¢ 215

@pchatard

Desktop design screenshot for the Fylo data storage component coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is welcome!

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Pierre, looks good! Just a few things here:

  • The component is touching the left and right gutter in medium widths up until the breakpoint

  • Icons could use cursor: pointer that suggests they are clickable

  • I would limit the use of ids for JS targeting or scroll links. They have a high specificity, meaning their styles are hard to override. Better to use classes.

Hope this helps!

2

Pierreā€¢ 215

@pchatard

Posted

@emestabillo Thank you for your comments ! I'll take a look into this and make some changes!

1
P
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Hey, nice work, Pierre! šŸ‘

Your solution looks good and is responsive! šŸ‘

I suggest,

  • Allowing the background SVG to fill the entire area of the screen in the mobile layout of the site. Currently, some white space begins to appear at the top and bottom of the viewport at very narrow screen widths.
  • Perhaps decreasing the right-padding in the box with the option icons just a little so that all of the icons remain on one row (even right before the layout changes from desktop to mobile).

Keep coding (and happy coding, too)! šŸ˜

1

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