Great job on completing the challenge!
It seems that the desktop version is not displaying correctly because you set the minimum width (min-width) to 1440px
Here are a few suggestions to enhance your code further:
- Your media query for the screen width seems to be set for larger screens. Consider adjusting it to
@media screen and (min-width: 796px)
for better responsiveness.
.container {
@media screen and (min-width: 796px) {
/* Styles specific to larger screens */
}
-Remove margin-left
and add margin-inline: auto
:
.container .summary {
border-radius: 32px;
/* Remove margin-left and add margin-inline:auto */
margin-inline: auto; /* Centering horizontally */
}
.container .results .circle {
width: 200px;
height: 200px;
border-radius: 50%;
/* Remove margin-left and add margin-inline:auto */
margin-inline: auto; /* Centering horizontally */
background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
}
This adjustment ensures that the elements are centered horizontally without using margin-lef
t. The margin-inline: auto
property is a shorthand for setting both margin-left
and margin-right
to auto, which is commonly used for centering block-level elements
Good luck with your coding, and keep up the good work!