P
David Turner• 4,100
@brodiewebdt
Posted
I am still learning accessibility practices. I have to go back and fix issues with some of my past solutions.
Marked as helpful
0
Design comparison
Solution retrospective
Another exercise!
on this one, I struggle to place the profile picture in between the two sections of the card. What would be the way to approach this?
I would also appreciate a few hints for placing those two circles in each way of the background. Any direction I should take?
Community feedback
P
David Turner• 4,100
@brodiewebdt
Posted
You want to wrap the card div inside a Main tag. All "main" content should be inside a Main tag for accessibility reasons.
Marked as helpful
0
P
Aleksander Tysklind• 820
@outerpreneur
Posted
@brodiewebdt Thank you, I have placed the main tag. though it was the same thing as the body. I've been reading more about it and it's purpose. Thanks for the tip!
0
P
David Turner• 4,100
@brodiewebdt
Posted
I used negative margin to move the image into place. I would think transform translate would work as well. As you can see from the other comments that there are multiple way to get things done.
Wrap your container div in a Main tag and add an ALT tag to the images and it will clear the accessibility warnings. You can leave the ALT tags empty in this case.
Download AXE DevTools and you can clear accessibility warnings while you code. https://www.deque.com/axe/devtools/
Hope this helps.
Marked as helpful
0
P
Aleksander Tysklind• 820
@outerpreneur
Posted
@brodiewebdt Thank you, David. Yes, some of the tips above helped me. I have added all the all tags. I'll make a better effort to include them in future mock projects. As for the Main tag, I believe I use a container called card already, is the main div wrapper. Thanks for the tip for Axe, I'm testing it.
0
Anthony Weathersby• 350
@acweathersby
Posted
Hey @outerpreneur,
One solution for dealing with the position of the avatar img is to make it an absolute positioned element, and then set its bottom position to bottom:-48px, which is negative half the height of the image. This will center the image on the bottom edge of the upper-card element.
position:relative will also need be added to the upper-card element to insure the position of the image is based on its parent container.
Finally, add enough padding to the next element, middle-card, to compensate for the overlap of the image into this element's container. padding-top:50px should do the trick.
Marked as helpful
0
P
Aleksander Tysklind• 820
@outerpreneur
Posted
@acweathersby Thank you so much! that worked very well. I will look more into more in-depth so I can understand how it works. Thanks a bunch again
0
Miguel Silva• 510
@migsilva89
Posted
You should add a class relative to the back items and absolute to the image, so then you have freedom to move it as you want.
I did the same project with Tailwind. https://profile-card-component-silk-gamma.vercel.app/ Keep going.
Marked as helpful
0
P
Aleksander Tysklind• 820
@outerpreneur
Posted
@migsilva89 Thank you!! looks good now. Great work!!
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