Centering Modules in Email

Highlighted
New Contributor

I have an image and text grouped with in a module, I have an identical module next to this. In mobile I want the modules to stack center but not the individual layers within the module. 

 

Can someone help me?

text-align:center; is not working 

Reply
0 Upvotes
14 Replies 14
Highlighted
Community Manager

Hey @jaqigibson,

 

The more details, links, examples, and screenshots that you can include the better the Community can assist.

 

Once we have more information, we can try to help out.

 

Thanks,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
New Contributor

Here is the desktop version looking how I want it to look, 

 

Screen Shot 2018-11-26 at 9.18.12 AM.png

 

Here is the mobile version not being centerd.

 

Screen Shot 2018-11-26 at 9.18.27 AM.png

 

Is there a way to center the left justified text on the page while remaining left justified? 

Reply
0 Upvotes
Highlighted
Regular Contributor

If you still want the text aligned left but want to center the text block try adding some margins.

Reply
0 Upvotes
Highlighted
New Contributor

Is there a way for the text to be left aligned for the desktop email but centered on mobile email?

Reply
0 Upvotes
Highlighted
Regular Contributor

Yes.  Use CSS media queries to alternate styles between desktop and mobile.  Here are the basics.

Reply
0 Upvotes
Highlighted
New Contributor

Even though emails should not use CSS style sheets rather should use inline styling? 

 

Reply
0 Upvotes
Highlighted
Regular Contributor

I did not realize you were creating an email.  Thought it was a website.  Your best bet for emails is using tables.  It is not possible to use media queries.

Reply
0 Upvotes
Highlighted
Regular Contributor

Another idea is to use FlexBox.  Check out this link for more details.

    .parent {

        display: flex; /* or use inline-flex */

        justify-content: space-between /*or use center*/

    }

 

Please post the relevant HTML or CSS and I can modify in browser...

Reply
0 Upvotes
Highlighted
Regular Contributor

Have you applied the text-align property to the parent?  Try also using the margin property.  For example:

 

.parent {

  text-align:center;

}

.child {

  margin: 0 auto;

}

Highlighted
New Contributor

Sadly that is not working. 

Reply
0 Upvotes
Highlighted
Regular Advisor | Platinum Partner

@jaqigibson, you can use media queries in email.  you cannot use flex.

do you have a preview link for the email? 

dennis
Reply
0 Upvotes
Highlighted
Regular Contributor

Thanks for clarifying. I meant to specifiy inline.

Reply
0 Upvotes
Highlighted
Regular Advisor | Platinum Partner

@jaqigibson, unsure how you originally built this, but if there is a way to add a class to the three rich text modules, that would make it cleaner.  Otherwise, you will need to target each by their ID.  here is what it would look like for the flying if you have to use the ID.  if you can add a class, substitute it for the id

@media (max-width: 480px){
   #hs_cos_wrapper_module_15409446881632902_ div {
    text-align: center !important;
  }
}

Firefox_Developer_Edition.png

dennis
Reply
0 Upvotes