Orientation

Permalink Browser Info Environment
How can I orient the icons on the left side? By standard, they are to the right.

Thanks for answering

Type: Pre-Sale
Status: Resolved
View Replies:
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi valuedwebdesign,

In view.css, comment out "float: right;" in .icon-container.
packages\svg_social_media_icons\blocks\svg_social_media_icons\view.css
.icon-container {
    /*float: right;*/
    padding-top: 5px;
    padding-bottom: 5px;
}

After making this change, the icons will align to the left side.
valuedwebdesign replied on at Permalink Reply
Thanks for answering, I have updated the file and things work! Is it also possible, that the link opens in a new tab?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@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.
lordbdogg replied on at Permalink Reply
How do I center the icons?
MrKDilkington replied on at Permalink Reply 1 Attachment
MrKDilkington
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
.icon-container {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
}

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)
.icon-container {
    /*float: right;*/
    padding-top: 5px;
    padding-bottom: 5px;
    width: 270px;
    margin-left: auto;
    margin-right: auto;
}

Please see attached screenshot.
lordbdogg replied on at Permalink Reply
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;
}
lordbdogg replied on at Permalink Reply
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;
}
alxbob8 replied on at Permalink Reply
alxbob8
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
MrKDilkington replied on at Permalink Reply
MrKDilkington
@alxbob8

You can add this CSS to your Custom CSS:
Toolbar > Page Settings (gear icon) > Design > Theme > Customize > Custom CSS gear icon button
@media (max-width: 40em) {
    .ccm-block-svg_social_media_icons {
        text-align: center;
    }   
    .ccm-block-svg_social_media_icons .icon-container {
        display: inline-block;
    }
}
alxbob8 replied on at Permalink Reply
alxbob8
I made the change and it looks great !!

Thanks so much,

Stefan.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@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:
@media (max-width: 40em) {
    .ccm-block-svg_social_media_icons {
        text-align: center !important;
    }
}

concrete5 Environment Information

--

Browser User-Agent String

Iron

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.