CMS Development

jaqigibson
Member

Centering Modules in Email

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 

0 Upvotes
14 Replies 14
josephLayden
Contributor

Centering Modules in Email

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;

}

jaqigibson
Member

Centering Modules in Email

Sadly that is not working. 

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Centering Modules in Email

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

do you have a preview link for the email? 

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

Centering Modules in Email

@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

0 Upvotes
josephLayden
Contributor

Centering Modules in Email

Thanks for clarifying. I meant to specifiy inline.

0 Upvotes
jennysowyrda
Community Manager
Community Manager

Centering Modules in Email

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

0 Upvotes
jaqigibson
Member

Centering Modules in Email

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? 

0 Upvotes
josephLayden
Contributor

Centering Modules in Email

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...

0 Upvotes
josephLayden
Contributor

Centering Modules in Email

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

0 Upvotes
jaqigibson
Member

Centering Modules in Email

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

0 Upvotes
josephLayden
Contributor

Centering Modules in Email

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.

0 Upvotes
josephLayden
Contributor

Centering Modules in Email

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

0 Upvotes
jaqigibson
Member

Centering Modules in Email

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

 

0 Upvotes