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

Positioning elements

TrakaMeiteneโ€ข 505

@TrakaMeitene

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


A little tricky, but at least it looks good on mobile and tablets . Made some changes, solving design problems. Thank you for comments.

Community feedback

Mijail Hernandezโ€ข 950

@MishaHernandez

Posted

Hello TrakaMeitene. Looks great, good job. ๐Ÿ‘‹

I would recommend that in your * {...} formatting rules you always use box-sizing: border-box, so that margins and padding do not affect the size of your boxes.

Always avoid using ID's, especially if your design doesn't use javascript. In similar elements, for example the three icons: file, folder and cloud, you could use pseudoclasses to select each one.

Sometimes the use of clip-path can be replaced by something simpler like a correctly positioned geometric figure. For example the .sturis element could be a semi-hidden triangle in the pop-up message.

The font family should be assigned in the body so that all elements inherit it and not have to repeat this property in several rules.

Greetings, and continue with the challenges ๐Ÿ‘

1

TrakaMeiteneโ€ข 505

@TrakaMeitene

Posted

@MishaHernandez some good ideas. Thank you. It Will be tomorrows work to do.

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