By JDev on Wednesday, 23 December 2015
Posted in General Issues
Replies 3
Likes 0
Views 691
Votes 0
How do you center users module for easysocial? I can add custom CSS if necessary, but trying to do a display:block;margin-left:auto;margin-rightLauto doesn't work when editing CSS directly in browser for testing.

Just looking to center it in screen b/c I only have a small set of users I'm featuring on main login page and I only want to add custom CSS for this on one page only not change module appearance everywhere on the site.

Also want to increase avatar sizes, too small and I only have 4-6 users max I'll be showing on login page centered in top position, entire width of page.

Thanks.
Hey there,

I've tried to using css to adjust that image align to center but unfortunately that was not possible to make it.

Perhaps you can try take a look of my attached screenshot below and see is it meet your current requirement?

If yes, you can apply this following css in your current template css file.


div#fd.es.mod-es-users .es-avatar, div#fd.es.mod-es-users .es-avatar img {
height: 140px !important;
width: 110px !important;
}

div#fd.es.mod-es-users .widget-list-grid>li {
margin-left: 60px !important;
}

.es-modules-es-general-after-toolbar .moduletable h3 {
text-align: center !important;
}
·
Wednesday, 23 December 2015 11:57
·
0 Likes
·
0 Votes
·
0 Comments
·
Increased size but margin left won't center, it will center for a specific display size you're looking at but the moment you change display sizes it will be off/wrong.


That's why,


display:block;
margin-left:auto;
margin-right:auto;


Is usually preferred and actually horizontal centers. Can I get proper centering code since that doesn't work correctly?
·
Wednesday, 23 December 2015 21:53
·
0 Likes
·
0 Votes
·
0 Comments
·
You can try these codes,

·
Thursday, 24 December 2015 13:16
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post