Hi all,

I was recently tasked with styling some html blocks within a drag n drop plugin.
Limited with the styling from the drag n drop I managed to add a <style> html block, with media queries, into the body of the email.
This seems to be working ok, the only issue I have is a block of social icons that don't want to centre on some early android devices (4.4/6.0) and some iOS devices (10.3.2/11.0).

I am using (.txt-center) to acheive the allignment so far:
<style>
@media only screen and (max-width:605px) {
@-ms-viewport{width:device-width}
@viewport {width:320px;}
body {margin: 0 !important;}
.txt-center {text-align:center !important; display: table !important;margin: 0 auto !important;}
.full {width:100% !important; max-width:100% !important;}
.auto {width:auto !important; max-width:auto !important;}

}
</style>

Are there any common connections with the above devices that would ignore the centre alignment?

I suspect a big issue is that the style sheet is within the body of the email, but I don't have access to the head as the drag n drop is a plugin.

Any ideas would help.

Content below:

<div class="" style="font-size: 16px;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; text-align: center;"><div style="padding-right: 0px; padding-left: 10px; padding-bottom: 0px; display: flex;">
<table cellpadding="0" cellspacing="0" width="100%" align="right" class="txt-center" style="text-align: right !important;">
<tbody><tr>
<td align="right" class="txt-center">
<div style="line-height:10px;font-size:1px"> </div>
<div style="display: table;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="txt-center" style="border-collapse:collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width:135px;" align="right">
<tbody><tr>
<td width="28" style="width:28px; padding-right: 5px;" valign="top">
<table align="right" border="0" cellspacing="0" cellpadding="0" width="28" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;Margin-right: 0px">
<tbody><tr style="vertical-align: top">
<td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<a href="##" title="Social" target="_blank"><img src="social.png" alt="social" title="social" width="28" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 28px !important"></a>
<div style="line-height:5px;font-size:1px"> </div>
</td></tr>
</tbody></table>
<table align="right" border="0" cellspacing="0" cellpadding="0" width="28" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;Margin-right: 0px">
<tbody><tr style="vertical-align: top">
<td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<a href="##" title="Social" target="_blank"><img src="social.png" alt="social" title="social" width="28" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 28px !important"></a>
<div style="line-height:5px;font-size:1px"> </div>
</td></tr>
</tbody></table>
<table align="right" border="0" cellspacing="0" cellpadding="0" width="28" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;Margin-right: 0px">
<tbody><tr style="vertical-align: top">
<td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<a href="##" title="Social" target="_blank"><img src="social.png" alt="social" title="social" width="28" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 28px !important"></a>
<div style="line-height:5px;font-size:1px"> </div>
</td></tr>
</tbody></table>
<table align="right" border="0" cellspacing="0" cellpadding="0" width="28" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;Margin-right: 0px">
<tbody><tr style="vertical-align: top">
<td align="left" valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<a href="##" title="Social" target="_blank"><img src="social.png" alt="social" title="social" width="28" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;max-width: 28px !important"></a>
<div style="line-height:5px;font-size:1px"> </div>
</td></tr>
</tbody></table>
</td></tr></tbody></table>

</div>
</td>
</tr>
</tbody></table>
</div></div>