Centering modules within a group

Highlighted
Occasional Contributor

I'm creating an e-mail template in Design Tools. In the screenshot below, I want the social media images/text line to be centered with the "Invite your friends" line. The CTA button, invite line and social media line are all currently part of a single group module. Any advice on what css styling I can add to make everything align properly?

 

Thanks!

 

inviteYourFriendsCenter.JPG

2 Replies 2
Highlighted
New Contributor

Hi @michelleGFN,

 

An email template can be very tricky to design. You could use a page center CSS at the group level.

 

.page-center {
float: none !important;
max-width: (enter your width here)px !important;
margin: 0 auto !important;

 

Here the big BUT...sometimes CSS to a group module for an email template will disappear depending on which platform the email is viewed in. 

 

The best way I've used is to hard code a <P> tag. 

<p style="text-align:center">

Invite your friends to discover their Footprint!<br>

<a href="(Social link)>(Social image)</a>&nbsp;<a href="(Social link)>(Social image)</a>&nbsp;<a href="(Social link)>(Social image)</a>

</p>

 

It's old school but your design format will hold.

Highlighted
Top Contributor | Gold Partner

I think Michelle might have the answer for you.  In case, you are still having trouble I have a bit more info. 

From the screenshot you previously shared, it looks like the social media images/text line is slightly to the left of the "Invite your friends" line. In that case, have you tried adding left padding to the social media images/text line center it? (Padding CSS documentation here). Normally, designers also use the text-align CSS property to align text to the center as well, maybe you can also get them to try to add a "text-align:center;" code to the module group, or the individual elements, to see if it helps as well? (Text-align CSS Documentation here)

 

Hope this helps, let me know if you have any further questions on this!

Alex Chapman | Inbound marketing Expert