I found it really difficult to align the bottom text (created by..) with the avatar image. In the end, I had to hard code it in. How could I center the text to the center of the image?
Any tips/methods would be really appreciated.
I found it really difficult to align the bottom text (created by..) with the avatar image. In the end, I had to hard code it in. How could I center the text to the center of the image?
Any tips/methods would be really appreciated.
Hey !
You asked how you could align the text to the center of the image. An easy way to do this is use Flexbox. I saw you used it in your body to center the card on the page.
You can wrap your image and your text in a div, you then display: flex on this div and then can use align-items: center to do what you are looking for. Then you can apply a gap to this same div for the spacing between the image and the text, or use a margin on either one if you like it better.
Gl hf !
i found a problem on button hover his 2px added to height of card
Hi this is looking good.
You said you have a problem on button hover adding 2px to the card which is normal. An easy way to fix this is to add the same border to your regular button styling rules instead of having it only on the hover. This way the border is always there but on hover when the background change you can now see the border without changing the dimension of the button.
Hope it help , have fun in your next projects !
Nice job !
You should consider adding other breakpoints for better responsiveness. And maybe increase your media query max-width to something bigger than 375 pixel.
You can see for yourself in your browser Devtools , between 375px and 1300px screen width, the left part containing all the information becomes very narrow and tall.
Have fun in your future projects !
All feedback as welcome.
Solution using FlexBox. Solução usando FlexBox.
Tive um pouco de dificuldade para alinhar a imagem no centro com o flexbox.
This looks very good i have just finished this challenge myself.