Padding left and right

[mjmlio]

Padding left and right

[iRyusa]

Hey there @joaopvilla !

Every padding is editable with padding-left/right attribute on any mj-element you're using. I found some errors in the current documentation revision, it should be updated today sorry about that. 👍

[joaopvilla]

No problems :) Maybe I have found another documentation error, when I use "vertical-spacing" attribute in mj-divider nothing happens :/ Am I doing something wrong?

<mj-divider border-width="1px" border-style="solid" border-color="lightgrey" vertical-spacing="5px"></mj-divider>

[WeshGuillaume]

Hey @joaopvilla !

Vertical-spacing is not in the source anymore! Thanks for mentioning it ! It will be removed!

[iRyusa]

Note that you can play with padding-left/right/top/bottom on every "content" element so you can do as such:

<mj-divider border-width="1px" border-color="lightgrey" padding-top="5" padding-bottom="5" />

[joaopvilla]

@GuillaumeBadi Thanks! So I think that vertical-align is not in the source anymore, right?

@iRyusa I already tryed that, in every single element I had above my divider, and a padding-bottom: 20px keeps appearing in the code :/

[iRyusa]

Did you reset section default padding-bottom & top ?

<mj-section padding-top="0" padding-bottom="0"> 
  // content
</mj-section>

[joaopvilla]

Oops, my bad, forgot to do that :p thanks again!

I need to solve just another bug/problem before I start using mjml in all email templates here at Startup I work :) see if you can help me. I'm not sure if I did something wrong or if it's a bug, but the mobile e-mail is getting too broken, it exceeds the maximum size of the screen creating a horizontal scroll

Here's the code:

<mj-body>
    <!-- Início Topo -->
    <mj-section>
      <mj-column>
      <!-- Logo Memed -->
        <mj-image src="https://uploads.intercomcdn.com/i/o/3708008/48c8226e3ab8b6eb9f9d5f1a/File1453135327278" align="center" width="165px"></mj-image>

        <!-- Chamada Principal -->
        <mj-text font-size="30px" color="#35BED4" font-family="Helvetica, Arial, sans-serif" line-height="36px" font-weight="100">Você sabe quais foram as principais atualizações de medicamentos?
        </mj-text>

        <!-- Texto de apoio -->
        <mj-text font-size="16px" color="#828C99" font-family="Helvetica, Arial, sans-serif" line-height="24px" font-weight="400">Na ultima semana, novos medicamentos foram registrados pela Anvisa, entraram e saíram do mercado. Mas pode ficar tranquilo que com a Memed você está sempre atualizado. :)</mj-text>
      </mj-column>
    </mj-section>
    <!-- Fim Topo -->

    <!-- Início Medicamentos-->
    <!-- Início Medicamento #1-->
    <mj-section padding-top="0" padding-bottom="0">
    <!-- Imagem Medicamento #1-->
      <mj-column width="100" padding-right="0px">
          <mj-image src="https://s3-sa-east-1.amazonaws.com/memed/icons/azul-generico.png" width="60px" padding-top="12px"></mj-image>
      </mj-column>

      <!-- Conteúdo Medicamento #1-->
      <mj-column width="500" padding-top="5" padding-bottom="5">
        <mj-text font-size="10px" color="#35BED4" padding-left="0px" padding-bottom="0px">Pfizer</mj-text>
        <mj-text font-size="18px" color="#828C99" font-family="Helvetica, Arial, sans-serif" font-weight="400" padding-left="0px" padding-top="0px" padding-bottom="5px">Inlyta 1mg, Comprimido revestido (28 un)</mj-text>
        <mj-text font-size="14px" color="#828C99" font-family="Helvetica, Arial, sans-serif" line-height="24px" font-weight="400" padding-left="0px" padding-top="0px">
        <em style="color: #ccc;font-size: 12px;padding: 2px 5px;background: #FFF;border-radius: 4px; border: solid 1px #ccc;">Neoplasia renal</em> Indicado para pacientes adultos com diagnóstico de carcinoma de células renais avançado de células claras.
        </mj-text>
        <mj-text font-size="12px" color="#828C99" font-family="Helvetica, Arial, sans-serif" line-height="24px" font-weight="400" padding-left="0px" padding-top="0px">
        <i class="registrado" style="color: white;font-size: 12px;padding: 2px 5px;background: #CEC224;border-radius: 4px;">Registrado Anvisa</i> Este medicamento foi registrado pela ANVISA e em breve estará disponível para prescrição pela Memed.
        </mj-text>
      </mj-column>
      <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" padding-top="0" padding-bottom="0"></mj-divider>
    </mj-section>
    <!-- Fim Medicamento #1-->

    <!-- Início Medicamento #1-->
    <mj-section padding-top="0" padding-bottom="0">
    <!-- Imagem Medicamento #1-->
      <mj-column width="100" padding-right="0px">
          <mj-image src="https://s3-sa-east-1.amazonaws.com/memed/icons/azul-generico.png" width="60px" padding-top="12px"></mj-image>
      </mj-column>

      <!-- Conteúdo Medicamento #1-->
      <mj-column width="500" padding-top="5" padding-bottom="5">
        <mj-text font-size="10px" color="#35BED4" padding-left="0px" padding-bottom="0px">Pfizer</mj-text>
        <mj-text font-size="18px" color="#828C99" font-family="Helvetica, Arial, sans-serif" font-weight="400" padding-left="0px" padding-top="0px" padding-bottom="5px">Inlyta 1mg, Comprimido revestido (28 un)</mj-text>
        <mj-text font-size="14px" color="#828C99" font-family="Helvetica, Arial, sans-serif" line-height="24px" font-weight="400" padding-left="0px" padding-top="0px">
        <em style="color: #ccc;font-size: 12px;padding: 2px 5px;background: #FFF;border-radius: 4px; border: solid 1px #ccc;">Neoplasia renal</em> Indicado para pacientes adultos com diagnóstico de carcinoma de células renais avançado de células claras.
        </mj-text>
        <mj-text font-size="12px" color="#828C99" font-family="Helvetica, Arial, sans-serif" line-height="24px" font-weight="400" padding-left="0px" padding-top="0px">
        <i class="registrado" style="color: white;font-size: 12px;padding: 2px 5px;background: #CEC224;border-radius: 4px;">Registrado Anvisa</i> Este medicamento foi registrado pela ANVISA e em breve estará disponível para prescrição pela Memed.
        </mj-text>
      </mj-column>
      <mj-divider border-width="1px" border-style="solid" border-color="lightgrey" padding-top="0" padding-bottom="0"></mj-divider>
    </mj-section>
    <!-- Fim Medicamento #1-->
</mj-body>

[iRyusa]

@joaopvilla render looks fine on gmail here's a screenshot of it.

Try it live on mobile may have some issue when applying media query we'll take a look at it

[iRyusa]

You may consider to use service as Litmus to check the render on mobile client until we fix it

[iRyusa]

If this is ok for you @joaopvilla can we close the issue ?

[joaopvilla]

But I want 2 columns in mobile too, like this:

I'm doing something wrong?

And why this margins are completely different? (Why content exceeds those margins?)

[iRyusa]

MJML doesn't support 2 column responsive yet, column is meant to stack on mobile.

In a future we would like to propose some kind of group for column to handle responsive as you like.

I think we need to add a width="100%" on any columns to center properly the rendered email. Can you open a new issue (and closing this one) with this centering issue with this image ?

[joaopvilla]

@iRyusa Yes :) I'll open another issue with this topic. Thanks!

[Tlapi]

Ok, so what i see here:

<mj-column width="500">

Gets rendered as:

<div style="vertical-align:top;display:inline-block;font-size:13px;text-align:left;width:100%;min-width:500px;" class="mj-column-px-500" aria-labelledby="mj-column-px-500"></div>

With CSS in header:

@media only screen and (min-width:480px) { .mj-column-px-500, * [aria-labelledby="mj-column-px-500"] { width:500px!important; } }

And that is the reason for horizontal rule to appear. If I undrestand correctly, when you pass width without unit, it gets render as fixed with in pixels and therefore not responsive. Is this intent?

[iRyusa]

There's some limitation on how we can properly display mobile email in an iframe right now. Problem isn't the media query, it's the min-width that is applied and shouldn't on mobile.

When you set no unit, default is px and yes this is intent because we have to support pixel perfect layout and pourcentage based.

[Tlapi]

@iRyusa Yes, you are right.

Problem is with min-width on the column, not with iframe. I think there is no reason for min-width on the column. So right now, when you set pixel width for a column, this column is not responsive.