Move Login Icons to the right

BowlsChat
Offline

Active Subscriptions:

None

10 years 8 months ago - 10 years 8 months ago #54802 by BowlsChat

Move Login Icons to the right was created by BowlsChat

I am using JFBConnect integrated with EasySocial.

I have 6 social icons installed but the default alignment is outside the div.jfbconnect-wrapper (539px x 32px) and to the left hand edge of the div.row block (569px x 32px)

I would like to move all the icons to the right, what code block do I use?

I tried adjusting the margin left in this code from the default -15px but it moved all the EasySocial items as well:

body div#fd .row {
    margin-left: -15px;
    margin-right: -15px;
}

The code below only affects the icons but creates/adjusts a left margin between all the blocks (I only wish to adjust the left margin beside the first icon):

.sourcecoast .pull-left {
    margin-left: 5px;
}

The aim is to move all the icons under the text in the middle. I assume I need to use margin-left within a more focused code block but cannot get the right combination, any advice appreciated.

Last edit: 10 years 8 months ago by BowlsChat.

The topic has been locked.

alzander
Offline

Support Specialist

10 years 8 months ago #54828 by alzander

Replied by alzander on topic Move Login Icons to the right

There's a few options on how to do this. Hopefully one of these gives you the flexibility you're looking for:
Move the whole wrapper around all the social buttons:

.jfbconnect-wrapper {
    width: 100%;
    margin: 0 33%;
}

Move the first button over like you asked:

.social-login.amazon {
    margin-left: 18px;
}

I hope that helps,
Alex

The topic has been locked.

BowlsChat
Offline

Active Subscriptions:

None

10 years 8 months ago #54842 by BowlsChat

Replied by BowlsChat on topic Move Login Icons to the right

Thank you Alex,

I tried different variations to get something that works with smaller devices and dropdown menus (to avoid using multiple tailored css for each menu/device) and switched to the larger icons to achieve an acceptable result using:

.jfbconnect-wrapper { 
    width: 100%; 
    margin: 0 6%; 
}

Thank you for your help, much appreciated.

The topic has been locked.

mel
Offline

Support Specialist

10 years 8 months ago #54847 by mel

Replied by mel on topic Move Login Icons to the right

There are usually multiple solutions to CSS issues, so I'm glad that you found something that works and is simple/clean for your purposes. Let us know if you run into any other problems.

-Melissa

The topic has been locked.

Start
Prev
1
Next
End

SourceCoast Login

Move Login Icons to the right