Footer in bottom right hand corner
Having trouble getting my footer down in the bottom right hand corner. I got it in a
flex
display and trying to use ::before
to get the icon svg to be before the div inside the anchor of the footer tag. Any thoughts on what I'm doing wrong here?
https://codepen.io/MD-2016/pen/KKBwaXy20 Replies
Adding
margin-top: 100%
kinda helps but you have to scroll downInteresting
I think something isn't matching with my setup
I did
margin-top: auto;
and it didn't move downbecause it needs to be a flex child
so wrapp it all in a flex-direction col like that example
and use the auto
My footer is flex
also please use the same 100% height* method and get away from the vh xD
parent > child relationship mate
The
a
would be the childright and to use the margin-top: auto; trick the footer needs to be a flex
Interesting why Column vs row
try it and find out!
best way to learn is to break things
I'll have to do it from my phone 🙂 shutdown for the night
do it later I was just showing ya how cause I have that pen handy just for this reason lol
I used those border reds to try to help visually align things if you're curious about those
best to use outline: cause it wont be in with boxmodel, but yea grea tway to debug
After I do that
margin-top: auto
will it be able to stay in view because currently I have to scroll beyond the content to get to it>.>;;
Trying to keep it in without the scrolling so far down
Like the example
I'm sorry I'm learning 😦
Oh ok ill need to look up outline
na you are just saying you will have to try when you get back to a pc 😄 cause yea it will
will work better than this too
Yeah I tried to get it from sticking too far to right off screen
The hard part will be getting the main content in the center
Also do I need
::before
on that footer to get the pencil before the div text or just continue using flex row?