litmus.com
Open in
urlscan Pro
54.174.44.245
Public Scan
Submitted URL: https://litmus.com/community/code/4194-why-is-email-not-centered-on-android-4-4*/
Effective URL: https://litmus.com/community/discussions/4194-why-is-email-not-centered-on-android-4-4*
Submission: On September 14 via api from US — Scanned from DE
Effective URL: https://litmus.com/community/discussions/4194-why-is-email-not-centered-on-android-4-4*
Submission: On September 14 via api from US — Scanned from DE
Form analysis 7 forms found in the DOM
POST /community/discussions/4194-why-is-email-not-centered-on-android-4-4/comments
<form class="new_comment nested_comment_form" id="new_comment" action="/community/discussions/4194-why-is-email-not-centered-on-android-4-4/comments" accept-charset="UTF-8" data-remote="true" method="post" novalidate="novalidate"><input name="utf8"
type="hidden" value="✓">
<input type="hidden" name="comment[parent_id]" id="comment_parent_id">
<textarea cols="50" rows="4" class="markdown-source form-control" placeholder="Write your comment" name="comment[content]" id="comment_content"></textarea>
<footer class="comment-reply-footer">
<a class="markdown-link" target="_blank" href="/community/markdown">Markdown supported</a>
<button class="btn btn-primary btn-sm ladda-button" data-style="expand-left" data-spinner-color="#69ab7f">Post Comment</button>
<a href="#" class="cancel btn btn-link">Cancel</a>
</footer>
</form><form class="form-inline subscribe" id="sub-form" onsubmit="updateMarketo(this);return false;">
<div class="form-group">
<input type="text" class="form-control email" name="Email" id="ohyku-ohyku" onfocus="if(this.value == 'Your email address') { this.value = ''; }" onblur="if (this.value=='') this.value = 'Your email address'" value="Your email address"
required="">
<input type="submit" value="→" class=" submit">
</div>
</form><form id="mktoForm_1058" style="display: none; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); width: 1px;" novalidate="novalidate" class="mktoForm mktoHasWidth mktoLayoutLeft">
<style type="text/css">
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton {
color: #fff;
border: 1px solid #75ae4c;
padding: 0.4em 1em;
font-size: 1em;
background-color: #99c47c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#99c47c), to(#75ae4c));
background-image: -webkit-linear-gradient(top, #99c47c, #75ae4c);
background-image: -moz-linear-gradient(top, #99c47c, #75ae4c);
background-image: linear-gradient(to bottom, #99c47c, #75ae4c);
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
border: 1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:focus {
outline: none;
border: 1px solid #447f19;
}
.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:active {
background-color: #75ae4c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#75ae4c), to(#99c47c));
background-image: -webkit-linear-gradient(top, #75ae4c, #99c47c);
background-image: -moz-linear-gradient(top, #75ae4c, #99c47c);
background-image: linear-gradient(to bottom, #75ae4c, #99c47c);
}
</style>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Campaign__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Medium__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Source__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow"><input type="hidden" name="UTM_Tracking_Content__c" class="mktoField mktoFieldDescriptor mktoFormCol" value="" style="margin-bottom: 10px;">
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap mktoRequiredField"><label for="Email" id="LblEmail" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Email Address:
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div><input id="Email" name="Email" maxlength="255" aria-labelledby="LblEmail InstructEmail" type="email" class="mktoField mktoEmailField mktoHasWidth mktoRequired"
aria-required="true" style="width: 150px;"><span id="InstructEmail" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_litmus_news" id="Lblsubscribe_to_litmus_news" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Subscribe to Litmus News
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_litmus_news" id="subscribe_to_litmus_news" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_litmus_news Instructsubscribe_to_litmus_news" class="mktoField"><label for="subscribe_to_litmus_news" id="Lblsubscribe_to_litmus_news"></label></div><span id="Instructsubscribe_to_litmus_news"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_litmus_weekly" id="Lblsubscribe_to_litmus_weekly" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Subscribe to Litmus Weekly
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_litmus_weekly" id="subscribe_to_litmus_weekly" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_litmus_weekly Instructsubscribe_to_litmus_weekly" class="mktoField"><label for="subscribe_to_litmus_weekly" id="Lblsubscribe_to_litmus_weekly"></label></div><span id="Instructsubscribe_to_litmus_weekly"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_product_updates" id="Lblsubscribe_to_product_updates" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Subscribe to Litmus Updates
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_product_updates" id="subscribe_to_product_updates" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_product_updates Instructsubscribe_to_product_updates" class="mktoField"><label for="subscribe_to_product_updates" id="Lblsubscribe_to_product_updates"></label></div><span
id="Instructsubscribe_to_product_updates" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_Litmus_Live" id="Lblsubscribe_to_Litmus_Live" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Subscribe to Litmus Live
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_Litmus_Live" id="subscribe_to_Litmus_Live" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_Litmus_Live Instructsubscribe_to_Litmus_Live" class="mktoField"><label for="subscribe_to_Litmus_Live" id="Lblsubscribe_to_Litmus_Live"></label></div><span id="Instructsubscribe_to_Litmus_Live"
tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFieldDescriptor mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset" style="width: 10px;"></div>
<div class="mktoFieldWrap"><label for="subscribe_to_CMO_Newsletter" id="Lblsubscribe_to_CMO_Newsletter" class="mktoLabel mktoHasWidth" style="width: 230px;">
<div class="mktoAsterix">*</div>Subscribe to Leading FWD
</label>
<div class="mktoGutter mktoHasWidth" style="width: 10px;"></div>
<div class="mktoLogicalField mktoCheckboxList mktoHasWidth" style="width: 150px;"><input name="subscribe_to_CMO_Newsletter" id="subscribe_to_CMO_Newsletter" type="checkbox" value="yes"
aria-labelledby="Lblsubscribe_to_CMO_Newsletter Instructsubscribe_to_CMO_Newsletter" class="mktoField"><label for="subscribe_to_CMO_Newsletter" id="Lblsubscribe_to_CMO_Newsletter"></label></div><span
id="Instructsubscribe_to_CMO_Newsletter" tabindex="-1" class="mktoInstruction"></span>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoFormRow">
<div class="mktoFormCol" style="margin-bottom: 10px;">
<div class="mktoOffset mktoHasWidth" style="width: 10px;"></div>
<div class="mktoFieldWrap">
<div class="mktoHtmlText mktoHasWidth" style="width: 475px;">
<p style="font-weight: 400; line-height: 1.4em;">Litmus uses the information you provide us to bring you great content about email marketing trends, stats, events and relevant products and services. You may unsubscribe from these
communications at any time. For more information, check out our <a href="https://www.litmus.com/privacy/" target="_blank">Privacy Policy</a>.</p>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoClear"></div>
</div>
<div class="mktoButtonRow"><span class="mktoButtonWrap mktoSimple" style="margin-left: 120px;"><button type="submit" class="mktoButton">Submit</button></span></div><input type="hidden" name="formid" class="mktoField mktoFieldDescriptor"
value="1058"><input type="hidden" name="munchkinId" class="mktoField mktoFieldDescriptor" value="864-VPZ-131">
</form>POST /sessions
<form class="form-horizontal community-sign-in-form" action="/sessions" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Sign in to Community</h3>
</div>
<div class="modal-body" id="sign-in-body">
<p class="community-modal-errors"></p>
<p>Are you new to Litmus Community?</p>
<a class="btn btn-primary btn-block toggle-modal-form sign-up" href="https://litmus.com/signup/community-plan">Create a Free Litmus Account</a>
<hr>
<p class="desc">Use your existing Litmus login to connect with the world’s most amazing email designers.</p>
<input type="hidden" name="return_to" id="return_to" value="https://litmus.com/community/discussions/4194-why-is-email-not-centered-on-android-4-4*" class="return-to">
<div class="form-group">
<input type="email" name="email" id="email" placeholder="Email Address" class="form-control">
</div>
<div class="form-group">
<input type="password" name="password" id="password" placeholder="Password" class="form-control">
</div>
<input type="submit" name="commit" value="Sign In" class="btn btn-outline btn-block" data-disable-with="Sign In">
<small class="note"> Having trouble signing in? Try <a class="toggle-modal-form forgot-password" href="/password/forgot">Forgot password</a>
</small>
</div>
</form>POST https://litmus.com/signup/community-plan
<form id="sign-up-modal-form" class="form-horizontal hide" action="https://litmus.com/signup/community-plan" accept-charset="UTF-8" method="post" novalidate="novalidate"><input name="utf8" type="hidden" value="✓"><input type="hidden"
name="authenticity_token" value="8b5DM7SX0RxFgzh6QciIy5RY6mFJgcL53pdwHDtbpW+nnLsypGIqpb8xaXXOI+kbBRh3G3MLZkMFF8ig4B+KjQ==">
<div id="sign-up-form">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Sign up to Community</h3>
</div>
<div class="modal-body" id="sign-up-body">
<input type="hidden" name="agree_to_terms" id="agree_to_terms" value="1">
<input type="hidden" name="return_to" id="return_to" value="https://litmus.com/community/discussions/4194-why-is-email-not-centered-on-android-4-4*" class="return-to">
<input type="hidden" name="referral_code[code]" id="referral_code_code">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="signup_user_first_name">First name</label>
<input type="text" name="signup[user][first_name]" id="signup_user_first_name" placeholder="First Name" class="required form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="signup_user_last_name">Last name</label>
<input type="text" name="signup[user][last_name]" id="signup_user_last_name" placeholder="Last Name" class="required form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="signup_user_email">Email</label>
<input type="email" name="signup[user][email]" id="signup_user_email" placeholder="Email Address" class="required form-control">
</div>
<div class="form-group">
<label for="signup_user_password">Password</label>
<input type="password" name="signup[user][password]" id="signup_user_password" placeholder="Password" class="required form-control">
</div>
<div class="form-group">
<label for="signup_user_password_confirmation">Confirm password</label>
<input type="password" name="signup[user][password_confirmation]" id="signup_user_password_confirmation" placeholder="Retype Password" class="required form-control">
</div>
<input type="submit" name="commit" value="Sign Up" class="btn btn-primary btn-block sign-up-button" data-disable-with="Sign Up">
<small class="note"> Already have a Litmus login? <a class="toggle-modal-form sign-in" href="#">Sign in</a>
</small>
</div>
</div>
<div id="sign-up-trial-box" class="hide">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Get more out of your Litmus account</h3>
</div>
<div class="modal-body modal-trial-sign-up" id="sign-up-body">
<div class="row">
<div class="col-sm-12">
<p> Your free Community account includes access to the Litmus Community, as well as limited access to Litmus Builder. Check out the entire Litmus Email Creative Platform when you sign up for a free 7-day trial. </p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="feature-card">
<ul>
<li>
<a href="#">Email Previews</a>
<div class="tip">
<p>Get 2,000 screenshots/month in popular email clients, including key international webmail clients, to ensure your emails look great everywhere.</p>
</div>
</li>
<li>
<a href="#">Builder</a>
<div class="tip">
<p>Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.</p>
</div>
</li>
<li>
<a href="#">Checklist</a>
<div class="tip">
<p>Get screenshots in popular email clients to ensure your email looks great everywhere.</p>
</div>
</li>
<li>
<a href="#">Code Editor Integrations</a>
<div class="tip">
<p>Preview and troubleshoot your emails right where you build with seamless integrations between Litmus and any local code editor, like Dreamweaver or Sublime.</p>
</div>
</li>
<li>
<a href="#">ESP Integrations</a>
<div class="tip">
<p>Save time producing and troubleshooting your campaigns with seamless integrations between Litmus and your email service provider (ESP).</p>
</div>
</li>
<li>
<a href="#">Spam Testing</a>
<div class="tip">
<p>Quickly identify issues pre-send that could impact your deliverability—and get actionable advice for how to fix them.</p>
</div>
</li>
<li>
<a href="#">Email Analytics</a>
<div class="tip">
<p>Optimize your campaigns with subscriber-level insights to improve segmentation and targeting strategies.</p>
</div>
</li>
<li>
<a href="#">Private Litmus Teams</a>
<div class="tip">
<p>Get full team visibility. Manage Litmus access and monitor usage across private teams.</p>
</div>
</li>
</ul>
<input type="submit" name="commit" value="Try Litmus free for 7 days" class="btn btn-primary btn-block trial-sign-up-button" data-disable-with="Try Litmus free for 7 days">
</div>
</div>
</div>
<small class="note">
<a class="no-thanks-link" href="#">No thanks, just sign me up without a trial</a>
</small>
</div>
</div><!-- End #sign-up-trial-modal-form -->
<input type="hidden" name="dbase[sid]" id="dbase_sid">
<input type="hidden" name="dbase[company]" id="dbase_company_name">
<input type="hidden" name="dbase[industry]" id="dbase_industry">
<input type="hidden" name="dbase[city]" id="dbase_city">
<input type="hidden" name="dbase[state]" id="dbase_state">
<input type="hidden" name="dbase[country]" id="dbase_country">
<input type="hidden" name="dbase[employees]" id="dbase_employees">
<input type="hidden" name="dbase[website]" id="dbase_website">
<input type="hidden" name="dbase[phone]" id="dbase_phone">
<input type="hidden" name="dbase[country_name]" id="dbase_country_name">
</form>POST https://litmus.com/password/forgot
<form id="forgot-password-modal-form" class="form-horizontal hide" action="https://litmus.com/password/forgot" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token"
value="8b5DM7SX0RxFgzh6QciIy5RY6mFJgcL53pdwHDtbpW+nnLsypGIqpb8xaXXOI+kbBRh3G3MLZkMFF8ig4B+KjQ==">
<div class="modal-header" id="sign-in-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Forgot password</h3>
</div>
<div class="modal-body" id="forgot-password-body">
<p class="community-modal-notifications"></p>
<div class="form-group">
<p class="desc">Enter your email address to reset your password</p>
<input type="email" name="email" id="email" placeholder="Enter your email" tabindex="1" required="required" class="form-control">
</div>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
<div class="g-recaptcha" data-sitekey="6LcNjygTAAAAAKf3uQqit9KwM5QJTsCd0mK1LZ7E">
<div style="width: 304px; height: 78px;">
<div><iframe title="reCAPTCHA"
src="https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcNjygTAAAAAKf3uQqit9KwM5QJTsCd0mK1LZ7E&co=aHR0cHM6Ly9saXRtdXMuY29tOjQ0Mw..&hl=de&v=wxAi4AKLXL2kBAvXqI4XLSWS&size=normal&cb=iq5ut6q9ahs6" width="304"
height="78" role="presentation" name="a-r81xqdadk6i7" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox"></iframe></div>
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid rgb(193, 193, 193); margin: 10px 25px; padding: 0px; resize: none; display: none;"></textarea>
</div><iframe style="display: none;"></iframe>
</div>
<br>
<input type="submit" name="commit" value="Reset my password" class="btn btn-primary btn-block" data-disable-with="Reset my password">
<small class="note"> Already have a Litmus login? <a class="toggle-modal-form sign-in" href="#">Sign in</a>
</small>
</div>
</form><form style="display: none; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(51, 51, 51); visibility: hidden; position: absolute; top: -500px; left: -1000px; width: 1600px;" novalidate="novalidate"
class="mktoForm mktoHasWidth mktoLayoutLeft"></form>Text Content
* Features
All Features Email Previews
Builder Checklist Spam Testing Email Analytics Litmus Extension
* Pricing
* Resources
Resources Litmus Conference Convince Your Team Gmail Promotions Builder
* Enterprise
* Community
Discussions Snippets Templates Jobs
* Blog
* Sign In
* Litmus
* Features
* Pricing
* Resources
* Enterprise
* Blog
* Community
* Discussions
* Snippets
* Templates
* Jobs
* My Account
* Sign In
* Community Home
* Discussions
* Learning
* Snippets
* Templates
* Jobs
* Create a Discussion
AM
6
WHY IS EMAIL NOT CENTERED ON ANDROID 4.4?
Adrian Maull posted 6 years ago
I'm not actually sure what's going on. The email looks like it has some margin
or padding on the left. Therefore, the email doesn't look centered. It looks
shifted to the right and it's cropping a small portion of the right side of the
email.
Anyone have any ideas as to what is going on here?
https://litmus.com/pub/8fa1696
Highest Voted Oldest First Most Recent
JW
22
Edit
Delete
James White replied 6 years ago
PROBLEM SOLVED!
https://blog.jmwhite.co.uk/2015/09/19/revealing-why-emails-appear-off-centre-in-android-4-4-kitkat
Add this to your head CSS and see if removes the margin.
body { margin:0 !important; }
div[style*="margin: 16px 0"] { margin:0 !important; }
Due to the lack of id or class, you can't target that div wrapper specifically
without using attribute selectors (and even with that its a hack), the body is
the main area to neutralise because its the element creating the side margin,
the div creates additional and potentially unwanted margin on the top and bottom
as well. See below for the explanation of what's going on.
DELICIOUS SOURCE CODE
After some source code diving into the Android 4.4 email app (which due to
Android being Open Source is rather easy!), I've found the cause of this. This
is an actual function in one of the many Java classes, specifically part of the
SecureConversationViewController.java file.
Note how the wrapping body tag has been defined, there is also div with
margin:16px 0; applied. This appears to match the behaviour we are seeing with
all sides except the right having margins. Except, the shorthand written in the
code should be only applying it to the top and bottom, having 0 declared for the
right side means the same value should be used for the left right? Correct,
because the wrapper div isn't causing the side margin, the body tag is. Notice
the %s, that's a placeholder for a px value which is calculated during rendering
the message view, the side margin is actually being applied there.
THE TECHNICAL STUFF
This is the actual Java source code where the body and div wrapper is generated
ANDROID 4.4 BODY AND WRAPPER
public void renderMessage(ConversationMessage conversationmessage)
{
mMessage = conversationmessage;
conversationmessage = mWebView.getSettings();
boolean flag;
if (!mMessage.alwaysShowImages)
{
flag = true;
} else
{
flag = false;
}
conversationmessage.setBlockNetworkImage(flag);
conversationmessage = new StringBuilder(String.format("<body style=\"margin: 0 %spx;\"><div style=\"margin: 16px 0; font-size: 80%%\">", new Object[] {
Integer.valueOf(mSideMarginInWebPx)
}));
conversationmessage.append(mMessage.getBodyAsHtml());
conversationmessage.append("</div></body>");
mWebView.loadDataWithBaseURL(mCallbacks.getBaseUri(), conversationmessage.toString(), "text/html", "utf-8", null);
conversationmessage = ConversationViewAdapter.newMessageHeaderItem(null, mDateBuilder, mMessage, true, mMessage.alwaysShowImages);
mMessageHeaderView.unbind();
mMessageHeaderView.bind(conversationmessage, false);
if (mMessage.hasAttachments)
{
mMessageFooterView.setVisibility(0);
mMessageFooterView.bind(conversationmessage, mCallbacks.getAccountUri(), false);
}
}
SIDE MARGIN CALCULATION
In addition, this Java file also contains a variable value which is based on a
certain calculation of two values.
mSideMarginInWebPx = (int)((float)bundle.getDimensionPixelOffset(0x7f09001b) / bundle.getDisplayMetrics().density);
This is where the additional margin value is coming from, it is based on an
Offset divided by Destiny, which will vary based on each device.
http://developer.android.com/reference/android/content/res/Resources.html#getDimensionPixelOffset%28int%29
http://developer.android.com/reference/android/content/res/Resources.html#getDisplayMetrics%28%29
http://developer.android.com/reference/android/util/DisplayMetrics.html#density
Reply to James White
VW
2
Edit
Delete
Veronica Williams replied 6 years ago
I love this fix and have been using it for some time, however when testing this
week my emails are cutting off on the right again with spacing on the left.
[booooooo] Have you heard of any changes?
RE
1
Edit
Delete
Ryan Escamilla replied 6 years ago
I have been having the same issue.
TG
0
Edit
Delete
Ted Goas replied 6 years ago
Thank you for taking your swiss army knife and cutting open email clients like
this! I've just dropped in your code and can confirm that it works! Cheers
James!
MR
0
Edit
Delete
Mark Robbins replied 6 years ago
Nice one for all the research and great solution.
MG
0
Edit
Delete
Michael Guinoo replied 6 years ago
Awesome fix! Thanks for the tip!
RS
0
Edit
Delete
R Stones replied 5 years ago
Well done James! This fixed my issue!
CM
0
Edit
Delete
Connor McCarra replied 4 years ago
This solution doesn't appear to be working anymore. Does anyone have an
alternative?
JW
2
Edit
Delete
James White replied 6 years ago
I've noticed this as well. The original link by OP is 404, but I think this what
is being referred to:
TOP AND LEFT SIDE:
RIGHT SIDE:
BOTTOM SIDE:
Using a bit of selector magic with CSS you can see where the space is coming
from visually:
* { background-color: rgba(255,0,0,.2); }
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
The pink outer colour is the space Android 4.4 is adding, the next inner layer
is the padding of the actual email template.
The padding/margin appears to be added to the top, left and bottom sides. The
fact this is happening on the left side without being equally set on the right
side is causing the problem and makes the email overall slightly off centre.
This is obviously being done by some form of wrapping element within the email
client. I'm not sure at this point what that is and if it can be overruled by
some CSS or layout change.
Like Nicole, investigation ongoing!
Edit #1: Appears to be some form of div element. Using a rather generic and
global CSS rule div { margin:0 !important; padding:0 !important; }, this removed
the top and bottom additional margin/padding, the left side still remained
however. Further work is needed to try and find out what specific elements are
in use and if any id or class can be used to specifically target Android 4.4
Edit 2: See my other post which exposes where the issue is happening in the
email app source code
Reply to James White
NM
2
Edit
Delete
Nicole Merlin replied 6 years ago
You are a magician! Thanks so much for working all this out! I am eternally
grateful.
FU
2
Edit
Delete
Freemium User replied 5 years ago
Two things did it for me:
* Horizontal fix: body { margin: 0 !important; padding: 0; ... }
* Vertical fix: body > div { margin:0 !important; } /*was enough to remove the
space above*/
Reply to Freemium User
SS
1
Edit
Delete
Sava Stankovic replied 5 years ago
This solution appear not to be working anymore, I tried everything and nothing
works.
Reply to Sava Stankovic
HN
0
Edit
Delete
Huken Nuken replied 4 years ago
Not found dear
Reply to Huken Nuken
JA
0
Edit
Delete
Jared Aust replied 5 years ago
I added negative margin, which fixed the issue. Try adding to your wrapper or
body tag margin: -20px !important; padding: 0 !important;
Reply to Jared Aust
RE
0
Edit
Delete
Ryan Escamilla replied 6 years ago
I have had this issue since the upgrade from 4.2 to 4.4 in litmus but haven't
investigated.
Reply to Ryan Escamilla
NM
0
Edit
Delete
Nicole Merlin replied 6 years ago
I can't access the results at your link, but I think I know what you're talking
about. It's like the body has margin or padding on it that cannot be removed
(kinda like Outlook 2007/10/13).
I've tried so many different things to get rid of this: zeroing margins, zeroing
padding, using min-width, trying 0px -webkit-margin-before/after/start/end, all
to no avail.
My attempts are ongoing!
Reply to Nicole Merlin
MA
0
Edit
Delete
Mussa Ali replied 3 years ago
Excellent
Reply to Mussa Ali
FB
-1
Edit
Delete
Filip Bisp replied 6 years ago
my experience is that Google changed the way the client renders HTML. From what
I've read/heard is that they're trying to migrate the platform into Gmail, thus
it has some querks(like Gmail)
The fix is pretty simple, but have a major impact on how I do emails and thus I
haven't myself implemented this myself because I think it's stupid and
counterproductive in the end (as they will probably change it again soon in the
future)
The fix:
Instead of writing your mobile responsive code like break classes, width and so,
on TD's, you have to write it on Tables. That basically means each time you have
2 blocks you want to seperate on mobile, you have to incase them both in Tables
and write the mobile responsive code on these specific tables.
Reply to Filip Bisp
Markdown supported Post Comment Cancel
Test your email campaigns in 100+ email clients and devices. Never send another
broken email again.
Start your free 7 day trial
COMPANY
* Team
* Customers
* Careers
* Contact
* Brand
PRODUCT
* Features
* Pricing
* Enterprise
* Extension
TOOLS
* Events
* Labs
* Scope
* Resources
HELP
* Knowledgebase
* Status
* Community
* Trust
SUBSCRIBE TO OUR EMAILS
*
Email Address:
*
Subscribe to Litmus News
*
Subscribe to Litmus Weekly
*
Subscribe to Litmus Updates
*
Subscribe to Litmus Live
*
Subscribe to Leading FWD
Litmus uses the information you provide us to bring you great content about
email marketing trends, stats, events and relevant products and services. You
may unsubscribe from these communications at any time. For more information,
check out our Privacy Policy.
Submit
--------------------------------------------------------------------------------
Copyright © Litmus Software, Inc. 2005-2021. 675 Massachusetts Ave., 11th Floor,
Cambridge, MA 02139. View our Terms of Service or Privacy Policy. Send us a note
to hello@litmus.com or give us a call at +1 (866) 787-7030
*
*
*
×
SIGN IN TO COMMUNITY
Are you new to Litmus Community?
Create a Free Litmus Account
--------------------------------------------------------------------------------
Use your existing Litmus login to connect with the world’s most amazing email
designers.
Having trouble signing in? Try Forgot password
JOIN THE LITMUS COMMUNITY
×
×
SIGN UP TO COMMUNITY
First name
Last name
Email
Password
Confirm password
Already have a Litmus login? Sign in
×
GET MORE OUT OF YOUR LITMUS ACCOUNT
Your free Community account includes access to the Litmus Community, as well as
limited access to Litmus Builder. Check out the entire Litmus Email Creative
Platform when you sign up for a free 7-day trial.
* Email Previews
Get 2,000 screenshots/month in popular email clients, including key
international webmail clients, to ensure your emails look great everywhere.
* Builder
Quickly identify issues pre-send that could impact your deliverability—and
get actionable advice for how to fix them.
* Checklist
Get screenshots in popular email clients to ensure your email looks great
everywhere.
* Code Editor Integrations
Preview and troubleshoot your emails right where you build with seamless
integrations between Litmus and any local code editor, like Dreamweaver or
Sublime.
* ESP Integrations
Save time producing and troubleshooting your campaigns with seamless
integrations between Litmus and your email service provider (ESP).
* Spam Testing
Quickly identify issues pre-send that could impact your deliverability—and
get actionable advice for how to fix them.
* Email Analytics
Optimize your campaigns with subscriber-level insights to improve
segmentation and targeting strategies.
* Private Litmus Teams
Get full team visibility. Manage Litmus access and monitor usage across
private teams.
No thanks, just sign me up without a trial
×
FORGOT PASSWORD
Enter your email address to reset your password
Already have a Litmus login? Sign in