Hi team,
In my footer, I have social icons in a widget area and for some reason, the Instagram icon sits higher than the others and I’ve got no idea why. It worked perfectly last week.
Please help :)
Lara
Hey Lara,
It looks like you have several line breaks in the markup which is causing that, could you try to remove them to see if that helps?
Best regards,
Rikard
Hey Rikard,
I had to do that to space them out evenly under a sliding logo element I have.
I removed some of them but it still appears higher than the others.
Lara
Hi again,
I’ve removed the icons and started again. The instagram icon moves up when I insert the link to it. My other icons do not do this.
Hi there,
the site is up and running.
Hi,
You have to edit the html and remove this inline style:
display: inline-block;
Best regards,
Ismael
Sorry, I’m not sure what you mean.
Hi Lara,
I have made it into an unordered list since just using spaces sometimes causes odd design issues.
Then I added this css code in Quick CSS:
#top .widget #footer-social {
display: flex;
}
Let us know if you need further assistance.
Best regards,
Nikko
Hi Nikko,
thanks for that. Looks great on PC.
On mobile and tablet view, there are some dots on the icons.
Thanks,
Lara
Hi Nikko,
Upon closer inspection, those dots are present on PC too. It’s very close to the background colour
Hi Lara,
Please replace the code I added in Quick CSS from:
#top .widget #footer-social {
display: flex;
}
to:
#top .widget #footer-social {
display: flex;
list-style: none;
}
Best regards,
Nikko