Looking to hire developers?
@Dodeun
@Pinedevs
Submitted
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.
@Dodeun
Posted
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 !
Marked as helpful
@othmanhs
Submitted
i found a problem on button hover his 2px added to height of card
@Dodeun
Posted
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 !
@The43rdsensei
Submitted
@Dodeun
Posted
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 !
@allesonsales
Submitted
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.
@Dodeun
Posted
This looks very good i have just finished this challenge myself.
Marked as helpful
