Hi valuedwebdesign,

In view.css, comment out "float: right;" in .icon-container.
packages\svg_social_media_icons\blocks\svg_social_media_icons\view.css

After making this change, the icons will align to the left side.

Thanks for answering, I have updated the file and things work! Is it also possible, that the link opens in a new tab?

@valuedwebdesign

That feature is not supported in the current version.

It will be added to the next version. Which will be out this week or next.

How do I center the icons?

Hi lordbdogg,

1. open view.css
packages\svg_social_media_icons\blocks\svg_social_media_icons\view.css
2. in view.css look for this CSS code block

3. comment out "float:right;"
4. add
- "width: 100px;"
- "margin-left: auto;"
- "margin-right: auto;"
*** take note, 100px is just a temporary placeholder

Centering the icons requires the div with the class of .icon-container to have a width (otherwise margin-left: auto; and margin-right: auto; won't do anything). This width will vary depending on the number of icons used, size of icons, and spacing between icons.

After choosing your icons, icon size, and icon spacing and then saving the block. You will need to open your browser tools and find "<div class="icon-container">". Clicking on this div will expose the CSS that applies to it. In the CSS, look for that "width: 100px" placeholder and adjust it up or down until the icons are centered and not overflowing onto a new row. Take this width and replace the placeholder width with it.

Example:
- 6 icons that are 45px wide and no spacing
- the width of .icon-container would need to be 270px to contain them in one row (6 x 45px)

Please see attached screenshot.

I got your social media icons to auto center by doing this:

Comment out float: right;
Add display: inline-block;

You end up with this:

.icon-container {
/*float: right;*/
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
}

I got your social media icons to auto center by doing this:

Comment out *float: right;*
Add *display: inline-block;*

You end up with this:

.icon-container {
/*float: right;*/
display: inline-block;
padding-top: 5px;
padding-bottom: 5px;
}

hi MrKDilkington,

With a lot of pleasure I installed the social media icons block in my footer. SUPER. and it is really a joy to setup the block!

On bigger screens I want to have it left in the footer and that is working well.

I have also a right footer block.

When the screen becomes smaller I would like to centre the block so that both (left and right) footer blocks are adjusted centred above each other ..

How can I do that ?

For the example go tohttp://test.stefanvandesande.nl... , to the footer and look what is happening when you make the screen smaller ...

I hope you can help me ?

Thanks a lot

Stefan

@alxbob8

You can add this CSS to your Custom CSS:
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button

I made the change and it looks great !!

Thanks so much,

Stefan.

@alxbob8

I updated the add-on and it will change the CSS that you will need for your site. When you update the add-on, you will need to change the position setting to left and change the CSS.

I believe this should work: