I'm migrating to a new template on Squarespace 7.0 (from Om template to Foster Juice template). I'm trying to center align the footer content on tablet and mobile because it looks really bad. I've managed to add in some custom CSS to stack and center align everything but it still looks poor. Any suggestions on how to make it look great on mobile and tablet? I'm adding screenshots to show how it looks.
And here is the code I've added in so far...
.Footer-inner {display:flex!important}
.Footer-blocks--top, .Footer-blocks--middle, .Footer-blocks--bottom{flex:1!important; display:flex!important; justify-content:center!important}
.Footer-blocks--bottom{display:none!important}
.Footer-blocks--top{justify-content:left!important;}
@media only screen and (max-width:950px) {.Footer-inner{display:inline!important}.Footer-blocks--top, {justify-content:center!important;}}
@media only screen and (max-width:950px)
{.Footer *{text-align:center}}