CMS Development

jaqigibson
Membro

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 Avaliação positiva
14 Respostas 14
josephLayden
Colaborador(a)

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
Membro

Centering Modules in Email

Sadly that is not working. 

0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

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 Avaliação positiva
jaqigibson
Membro

Centering Modules in Email

0 Avaliação positiva
dennisedson
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

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 Avaliação positiva
josephLayden
Colaborador(a)

Centering Modules in Email

Thanks for clarifying. I meant to specifiy inline.

0 Avaliação positiva
jennysowyrda
Gerente da Comunidade
Gerente da Comunidade

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 Avaliação positiva
jaqigibson
Membro

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 Avaliação positiva
josephLayden
Colaborador(a)

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 Avaliação positiva
josephLayden
Colaborador(a)

Centering Modules in Email

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

0 Avaliação positiva
jaqigibson
Membro

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 Avaliação positiva
josephLayden
Colaborador(a)

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 Avaliação positiva
josephLayden
Colaborador(a)

Centering Modules in Email

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

0 Avaliação positiva
jaqigibson
Membro

Centering Modules in Email

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

 

0 Avaliação positiva