Social Footer Element Horizontal not Vertical

Is there a way to have the social elements in a footer horizontal instead of vertical?

Hey there,

Your container’s Flex Layout should be set to Row. I see you have a text above your icons though. Regretfully, you’ll need to remove it or use regular HTML or shortcodes inside a text element instead for your icons.

Thanks.

Is there a shortcode for social in Pro?

Hi There,

On The header builder you have a element called Social, you can select many icons and build your social icons by using it multiple times.

Hope it helps!

Hi Guys,

I am using the footer builder and I’m using the 3-column layout. I have 4-5 social icons in one column, but they only go vertically, one below the other. How can I make them go one after the other on one line or one row? Of course, I still want it to be responsive, but doing ‘float:left;’ kind of css just breaks it :frowning:

Hi,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation.

For the mean time, you can try display:inline-block;

Thank you.

Hi,

The URL is in the note

I tried the inline-block but it just moves the icon within the circle.
Thanks!

Hi there,

I tried it too and it’s not possible since all elements within a container is controlled by flex styling. What you could do is the same as the above suggestion where you can manually add social icon’s shortcode in a text element.

Example,

  1. Please make your container flex layout to column
  2. Add text element instead of social element
  3. Add this content to that text element
<a href="" class="x-btn x-btn-medium">[icon type="facebook"]</a><a href="" class="x-btn x-btn-medium">[icon type="twitter"]</a><a href="" class="x-btn x-btn-medium">[icon type="instagram"]</a><a href="" class="x-btn x-btn-medium">[icon type="linkedin"]</a>
  1. Change that code to match the URLs and you may also apply different styling for the button. Like from here

Hope this helps.

Cool that worked. I added some css to make it look pretty and it does the trick. Thanks

Glad that we could be of a help :slight_smile: