Punctuation shifting all the way to the left of the last line #2514
Labels
Comments
|
That looks like a side effect of using direction="rtl". That's insane we've
never found out about this. You can reset the mj-text with some css to
direction: ltr that should solve the issue for now
…On Thu, Aug 4, 2022 at 10:42 PM thetonyhendrix ***@***.***> wrote:
I have built out a few components where this continues to happens. The
punctuation for the headline and the body copy are shifting all the way to
the left of the bottom line of text. I have attached the MJML and HTML.
Here is one component in MJML:
<!-- START DESKTOP SECTION --> <mj-section padding="12px 24px 0 24px"
direction="rtl" css-class="hide_on_mobile"> <mj-column width="50%"
vertical-align="middle" direction="rtl"> <mj-image src="
https://cdn.ramseysolutions.net/daveramsey.com/media/email/cnl/2022/0724/fpu-ad-desk.png"
padding-top="0" href="https://www.ramseysolutions.com/giveaway">
</mj-image> </mj-column> <mj-column width="50%" vertical-align="middle"
direction="rtl"> <mj-text font-weight="600" font-size="20px" padding="0"><a
href="https://www.ramseysolutions.com/giveaway"
class="link_no_deco">Enter Our Cash Giveaway Daily!</a></mj-text> <mj-text
font-size="18px" padding="0">Enter for your chance to win one of our weekly
$500 prizes or our $3,000 grand prize.</mj-text> <mj-button align="left"
padding="10px 0" href="https://www.ramseysolutions.com/giveaway">Pick Me
</mj-button> </mj-column> </mj-section> <!-- END DESKTOP SECTION -->
Here is the same component in HTML:
`<!doctype html>
<title> </title> <style type="text/css"> #outlook a { padding: 0; }
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style> <style type="text/css"> @import <https://github.com/import> url(
https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700); </style>
<style type="text/css"> @media <https://github.com/media> only screen and
(min-width:480px) { .mj-column-per-50 { width: 50% !important; max-width:
50%; } } </style> <style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-50 { width: 50% !important; max-width: 50%; }
</style> <style type="text/css"> @media <https://github.com/media> only
screen and (max-width:480px) { table.mj-full-width-mobile { width: 100%
!important; }
td.mj-full-width-mobile {
width: auto !important;
}
}
</style> <style type="text/css"> </style>
<https://www.ramseysolutions.com/giveaway>
Enter Our Cash Giveaway Daily! <https://www.ramseysolutions.com/giveaway>
Enter for your chance to win one of our weekly $500 prizes or our $3,000
grand prize.
Pick Me <https://www.ramseysolutions.com/giveaway>
`
*Expected behavior*
The punctuation should be at the end of the sentence.
*MJML environment (please complete the following information):*
- OS: MacOS
- MJML Version 4.12.0
- MJML App 3.0.4
*Screenshots*
[image: Screen Shot 2022-08-04 at 3 41 26 PM]
<https://user-images.githubusercontent.com/84101568/182948652-f4480159-583c-4543-88a8-bfa7719c04dc.png>
—
Reply to this email directly, view it on GitHub
<#2514>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAELHTMKGB7LEW7M242IVOLVXQTKDANCNFSM55T3HIYA>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have built out a few components where this continues to happens. The punctuation for the headline and the body copy are shifting all the way to the left of the bottom line of text. I have attached the MJML and HTML.
Here is one component in MJML:
Here is the same component in HTML:
Expected behavior
The punctuation should be at the end of the sentence.
MJML environment (please complete the following information):
Screenshots
The text was updated successfully, but these errors were encountered: