kjm2023• 40
@kjm2023
Submitted
Is there a specific formula to create a circular border? What is the best way to maintain the size of the card regardless of screen size?
Nicole Parker
@NParker33
All comments
- Nicole Parker• 290
@NParker33
Posted
Hey, good job taking on this challenge!
In order to have a circular border when the border-radius is applied, the image will need to be square. Since this particular challenge doesn't require responsiveness, I would recommend setting a fixed width and height for your image. For example:
.creator img { width: 40px; height: 40px; border-radius: 100%; }For the card size, there are a few different ways you could go about it. One possibility is to use a fixed pixel size for the width and padding instead of using percentage.
Example:
main { width: 300px; padding: 15px; }Marked as helpful
0 - Pogen• 60
@IPogenI
Submitted
Creating the overlay was a bit hard as I keep forgetting stuffs when i am not in touch with them. Once again, I tried to maintain the best practice but if there is anything that I can improve on then please let me know. Thank you!
Nicole Parker• 290@NParker33
Posted
This looks great! One suggestion to help with the issues in the accessibility report would be to change the first
<div class="card">to<main class="card">. Keep up the great work!Marked as helpful
1 - Glenn Høines• 10
@GlennHL
Submitted
My first challenge on frontendmentor.io, also my first code written alone without a code-along video tutorial. Feel free to give any feedback on what to improve on, it will be highly appreciated.
Nicole Parker• 290@NParker33
Posted
Fantastic job on this! One small suggestion would be to either remove or adjust the media query so that the hover state can be viewed on smaller screens, like laptops, as well. Keep up the great work!
1 - Tassie Oshiro• 60
@tassieoshiro
Submitted
The part I have more difficulty with was trying to center the background waves on the center, but it was a fun project to build. Any advice on how to execute the project would be appreciated. Thanks!
Nicole Parker• 290@NParker33
Posted
This looks great! One suggestion for centering the wave background is to remove the 'center/cover' values from the background property.
Marked as helpful
0 - Ivandro Neto• 160
@ivandro-neto
Submitted
Hi, I would like receive your opinion and tips to improve my code.
Nicole Parker• 290@NParker33
Posted
This looks great! If you'd like to have your card a little more centered, you can make the height of the body 100vh, and add 'justify-content: center'. Then you can remove the padding-top on the body. Keep up the great work!
Marked as helpful
0 - Karol Binkowski• 1,640
@GrzywN
Submitted
Any feedback or suggestions how I can improve my code are welcome here. There is always room for improvement.
Nicole Parker• 290@NParker33
Posted
This looks amazing! Great job!
Marked as helpful
0
