kalisaed• 170
@kalisaed
Posted
you can use letter spacing and font-weight in the button to let it more style + your work is so good 😊❤️
Marked as helpful
0
Design comparison
Community feedback
hitmorecode• 6,270
@hitmorecode
Posted
Nice well done, the animation looks good too. There is one issue with your card. When you go to mobile screen size. The circle in the middle of the card, is no longer round but oval. This is because you usde % for both width and height of the container.
You can fix this by using px, em or rem for the width and height.
In your case just change both the width and height to 120px
0
Ahmed Hazem• 180
@ahmed-hazem-1
Posted
i tried to put width and height in px ,but when i small the size of screen the div of big score go out of its container so, i went to % ,but if you can solve this issue i'll be thankful❤️😊 @hitmorecode
0
Ahmed Hazem• 180
@ahmed-hazem-1
Posted
what if i make the container of big score const value , and make the score div in % 🤔@hitmorecode
0
hitmorecode• 6,270
@hitmorecode
Posted
@ahmed-hazem-1
.result .score{
margin: 10px auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
width: 120px; ***change to this
height: 120px; ***change to this
border-radius: 50%;
background:linear-gradient(hsla(256, 72%, 46%, 1),hsla(241, 72%, 46%, 0));
font-size: 15px;
color: rgba(255, 255, 255, 0.644);
}
This should work for your. I tested it inside Firefox dev tools and it works. Hope you find this helpful
Marked as helpful
0
Ahmed Hazem• 180
@ahmed-hazem-1
Posted
thanks😊❤️@hitmorecode
0
Please log in to post a comment
Log in with GitHub
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