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

CSS Flex, HTML semántico, variables CSS,

ELU 10

@ciberelu

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. I found difficult to make the gradient.
  2. The circle

Community feedback

Rino 340

@Rhinozer0s

Posted

Hi @ELU,

your solution looks great! I have some recommendations for you.

Centering

You should remove the width, margin and padding of your <body>. The body should always be on width: 100% (which is the standard for block-elements). Use this to center your main-section:

body{
display: grid;
place-content: center;}

Aspect-ratio

Instead of setting a width and a heigh´t, you could use use aspect-ratio property. Use this in combination with the width of your element and the height will always increase proportionally.

width: 200px;
aspect-ratio: 1 / 1;

In addition your sould use responsive untis like rem or em for building your website. Here you can read more about css units: https://www.w3schools.com/css/css_units.asp

i hope you find this helpfull 🤝

Marked as helpful

0

ELU 10

@ciberelu

Posted

@Rhinozer0s thanks for the recomendation i am going to do the changes

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