Sol B W• 80
@solybarr
Posted
Thank you @rfilenko
0
Design comparison
Solution retrospective
Hi I'm a little disappointed by this one, it was harder than I thought. I had trouble with the relative/absolute positioning of the Call to action that overlaps the footer. I couldn't center it the normal way with margin 0 auto because of the positioning. I couldn't size it correctly either. Thanks for any help.
Community feedback
Roman Filenko• 3,335
@rfilenko
Posted
Hi Sol, no need for so many overwrites, simple positioning of cta block will be enough: { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }. Also check mobile version, maybe add some hover states😉. Roman
0
Sol B W• 80
@solybarr
Posted
Thank you @waleed-alfaifi @SahasSaurav
0
Sahas saurav• 745
@SahasSaurav
Posted
the reason behind the accessibility issue is each must be uniquely identity from other so use aria-label attribute and this aria-label attribute also help with screen reader how to describe about the link. <a href="www.facebook.com" aria-label="facebook">Facebook</a>
0
Waleed Alfaifi• 130
@waleed-alfaifi
Posted
You can use position: relative instead of position: absolute and use negative margin-bottom to move the CTA down. When you use position: relative you can use margin: 0 auto to center the CTA. Just make sure you set a max-width to be able to center it.
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