Margin/Justified issues
https://codepen.io/Miss-Fox/pen/NWJgRjB?editors=0100
So I'm trying to emulate a swipe so that if one of these ".item"'s has focus, its translated over to show the user the very end of the list. I am up to my neck into margins and "justify-content" "justify items" "justify self" and for the life of me cannot figure out how to fix it.
I want the behaviour of
but only on the one item that has focus. I tried some hacky
transform: translate solutions but i know theres a proper way to accomplish this I just cannot figure out where im going wrong.2 Replies
if you want to use justify-self: end you would need create empty space for the justify to work and to do that you need to increase the width of the item by the size of the white box. https://codepen.io/MannixMD/pen/ZEPyXZy
I’m not able to make this work for some reason , the item doesn’t gain focus
Hmm trying to see what you mean /what you changed. The empty space would need to be inside .item or inside .items-list
Oh got it working. I see you added width: calc(100% +139px) to both .items and .items-details ? I’m wondering how to keep it responsive as with the clamp the “white box” isn’t always the same size.
So weird it’s only working on an Android not iPhone. Wonder what’s causing that to not work with safari engine.