@kjm2023
Latest solutions
Latest comments
- @NParker33
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 - @IPogenI@NParker33
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 - @GlennHL@NParker33
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!
- @tassieoshiro@NParker33
This looks great! One suggestion for centering the wave background is to remove the 'center/cover' values from the background property.
Marked as helpful - @ivandro-neto@NParker33
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 - @GrzywN
