Footer layout issue

[canavera]

Hi!
I am having some trouble with the footer. I have been trying to replicate this site’s ( https://www.heroin-bikes.com ) sticky footer with the same mobile compatibility.
Right now I’m using a single column footer with the following code in the widget :

ENG – FR • <div class=”aux-item aux-item-social”><ul class=”social-icons standard “><li class=”twitter”><i class=”fa-twitter”></i><i class=”fa-twitter”></i><li class=”facebook”><i class=”fa-facebook”></i><i class=”fa-facebook”></i><li class=”instagram”><i class=”fa-instagram”></i><i class=”fa-instagram”></i><li class=”rss”><i class=”fa-rss”></i><i class=”fa-rss”></i></div> • legal mentions

And I’m using some additional css :

#footer {
padding: 10px 0 0;
background-position: bottom center;
position: fixed;
bottom: 0px;
height: 70px;
width: 100%!important;
padding: 0;
margin: 0;
width: 100%!important;
}

#footer, #footer p, #footer h3.spb-heading {
width: 100%!important;
text-align: center!important;
}

#footer-widgets ul.social-icons{
margin-top:-10px!important;
text-align: center!important;
}

@media screen and (max-width: 767px) {
#footer h3.spb-heading {
width: 100% !important;
text-align: center !important;
}

#footer-widgets .widget {
text-align: center !important;
}
}

The thing is I can’t get the social icons to align properly with the other elements. I’d like to get them all on the same line and have it stay the same on mobile.
Any help would be much appreciated 🙂

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide a mockup image of how you would like it?
To see what we can do?

-Rui

[canavera]

Sure, I’m trying to replicate the footer in the attached file

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Can you check your site, made some adjustments in the structure.

-Rui

[canavera]

Hi, thanks a lot it does look much more like what I had in mind. The only thing left is that the text isn’t aligned with the social icons for some reason. I’ve tried vertical-align, margin-bottom stuff like that but I can’t get it to work
Any ideas how to fix that ?
Here’s what I’m seeing on my end

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Add also this code below.

#footer-widgets .lang-text, #footer-widgets .legal-mentions {
    margin-bottom: 18px!important;
}

Hope it helps.

-Rui

[canavera]

Perfect, thanks a lot. Looks just like what I had in mind

[Rui Guerreiro – SUPPORT]

No problem. Glad I could help.

-Rui