Hello guys!
This is my solution to the challenge. I used FlexBox here to center the component. I also applied what they call BEM naming convention technique, but I'm unsure if what I'm doing is correct. I also used custom property naming for re-usability of the style.
What I can't seem to break here is to stay the footer on the bottom while maintaining the component to the center. I used the margin: auto to the footer, 'attribution' specifically', but the component itself can't stay in one place. Should I change the approach here?
Any feedback is welcome! 😁
@fernandolapaz
Posted
Hi 👋, If I understand your question about the footer, maybe this can help you:
@media screen and (min-height: 35rem) {
.attribution {
position: fixed;
bottom: 0.5rem;
}
}
The min-height is just so it doesn't overlap the card in viewports with small height (such as mobile landscape orientation).
I hope it’s useful 🙂
Regards,
Marked as helpful
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
