Social icons footer in row, while container in column?

[timschouwink]

Hi There,

It seems that i’m overlooking something badly, but i simply can’t find it…

(pro footer builder) How do i place social icons in a row when the container is in column?

See example here: http://gainful-poetry.flywheelsites.com/ (third container)

Thanks!

[Prasant]

Hello @timschouwink,

Thanks for asking.

Please select Row under Container > Flex Layout > Layout. Have recorded a screencast that you can take a look. https://cl.ly/252R3w3o2l2J

Thanks.

[timschouwink]

Hi Prasant,

Thanks, but i already know this. The question is: How do i place social icons in a row when the container is in column? You give me an answer that i must change to container to ‘row’. But that is exactly my question. As you can see there is a title in my Footer above the icons, this must stand above the social icons (which must be in row).

So how to manage this?

thanks!

[thai]

Hi There,

Please delete your social icons then add a second text element with the following HTML code:

<a class="e108-12 x-anchor x-anchor-button iv_footer-icon" tabindex="0" href="#" style="outline: none;">
		<span class="x-anchor-content"><span class="x-graphic" aria-hidden="true"><i class="x-icon x-graphic-icon x-graphic-primary" data-x-icon="" aria-hidden="true"></i></span></span>
	</a>
	<a class="e108-13 x-anchor x-anchor-button iv_footer-icon" tabindex="0" href="#">
	<span class="x-anchor-content">
	<span class="x-graphic" aria-hidden="true">
	<i class="x-icon x-graphic-icon x-graphic-primary" data-x-icon="" aria-hidden="true"></i>
	</span>              </span>
	</a>
	<a class="e108-14 x-anchor x-anchor-button iv_footer-icon" tabindex="0" href="#">
	<span class="x-anchor-content">
	<span class="x-graphic" aria-hidden="true">
	<i class="x-icon x-graphic-icon x-graphic-primary" data-x-icon="" aria-hidden="true"></i>
	</span>              </span>
	</a>

Hope it helps

[timschouwink]

Hi Thai,

I have added it. But it does not add anything…:http://gainful-poetry.flywheelsites.com/

What goes wrong?

Thanks!

[Alaa]

Hi timschouwink,

Adding this CSS snippet into (Pro > Theme Options > CSS) should fix this issue:

.iv_footer-contact .x-graphic-icon {
    width: 1.2em;
    border-radius: 100em;
    height: 1.2em;
    line-height: 1.2em;
    font-size: 2.4em;
    color: hsl(0, 0%, 0%);
    background-color: hsl(0, 0%, 100%);
    padding: 20px!important;
}
.iv_footer-contact .x-graphic-icon:before {
    font-size: 0.5em;
}

Thanks.

[timschouwink]

Hi Alaa,

Super! It’s working perfectly! Thanks for the fast and helpful support.

Cheers!

[lely]

You are always welcome.

For more flexbox guidance, please check video here