HTML Newsletter show different 's in mobile and desktop Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern) Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!What are valid values for the id attribute in HTML?Recommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?HTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?What is the purpose of the “role” attribute in HTML?Confusion about css coding standards for Html Email newsletterHow to get a mobile image to hide in Gmail?
If Windows 7 doesn't support WSL, then what is "Subsystem for UNIX-based Applications"?
Why is a lens darker than other ones when applying the same settings?
Caught masturbating at work
Is it dangerous to install hacking tools on my private linux machine?
Relating to the President and obstruction, were Mueller's conclusions preordained?
How does light 'choose' between wave and particle behaviour?
How to change the tick of the color bar legend to black
GDP with Intermediate Production
AppleTVs create a chatty alternate WiFi network
In musical terms, what properties are varied by the human voice to produce different words / syllables?
New Order #6: Easter Egg
Did Mueller's report provide an evidentiary basis for the claim of Russian govt election interference via social media?
One-one communication
As a dual citizen, my US passport will expire one day after traveling to the US. Will this work?
White walkers, cemeteries and wights
What would you call this weird metallic apparatus that allows you to lift people?
Question about this thing for timpani
malloc in main() or malloc in another function: allocating memory for a struct and its members
How do living politicians protect their readily obtainable signatures from misuse?
Why is the change of basis formula counter-intuitive? [See details]
Is there public access to the Meteor Crater in Arizona?
Simple HTTP Server
Tannaka duality for semisimple groups
What does Turing mean by this statement?
HTML Newsletter show different
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!What are valid values for the id attribute in HTML?Recommended way to embed PDF in HTML?Convert HTML + CSS to PDF with PHP?HTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?What is the purpose of the “role” attribute in HTML?Confusion about css coding standards for Html Email newsletterHow to get a mobile image to hide in Gmail?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I am coding an email newsletter.
I want to show a <td> with a height of 400px on desktop but then reduce down on mobile to say 200px.
I don't want to use media queries for this as they don't work on some email clients and I want to get it working on as many email clients as possible.
Would anyone be able to offer help as to the best way of doing this. I was thinking of having a mobile show / mobile hide on two separate <td>s with the same content but just different height's given for the inline style.
Is there a way of doing this fully inline without the need for style in the header/media queries.
html newsletter
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
add a comment |
I am coding an email newsletter.
I want to show a <td> with a height of 400px on desktop but then reduce down on mobile to say 200px.
I don't want to use media queries for this as they don't work on some email clients and I want to get it working on as many email clients as possible.
Would anyone be able to offer help as to the best way of doing this. I was thinking of having a mobile show / mobile hide on two separate <td>s with the same content but just different height's given for the inline style.
Is there a way of doing this fully inline without the need for style in the header/media queries.
html newsletter
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53
add a comment |
I am coding an email newsletter.
I want to show a <td> with a height of 400px on desktop but then reduce down on mobile to say 200px.
I don't want to use media queries for this as they don't work on some email clients and I want to get it working on as many email clients as possible.
Would anyone be able to offer help as to the best way of doing this. I was thinking of having a mobile show / mobile hide on two separate <td>s with the same content but just different height's given for the inline style.
Is there a way of doing this fully inline without the need for style in the header/media queries.
html newsletter
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
I am coding an email newsletter.
I want to show a <td> with a height of 400px on desktop but then reduce down on mobile to say 200px.
I don't want to use media queries for this as they don't work on some email clients and I want to get it working on as many email clients as possible.
Would anyone be able to offer help as to the best way of doing this. I was thinking of having a mobile show / mobile hide on two separate <td>s with the same content but just different height's given for the inline style.
Is there a way of doing this fully inline without the need for style in the header/media queries.
html newsletter
html newsletter
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
edited Mar 10 at 12:34
Mr Lister
35.6k1078121
35.6k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
asked Mar 8 at 23:29
new_codernew_coder
767
asked Mar 8 at 23:29
new_codernew_coder
767
767
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53
add a comment |
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53
add a comment |
2 Answers
2
active
oldest
votes
Media queries, despite your reluctance to use them, are your best option.
The only other tools which can dynamically adjust based on the height of something are:
- Percentage lengths … which don't let you pick between two fixed heights and which depend on the container not having
height: auto - JavaScript … which no email client will execute.
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
add a comment |
The simplest solution is to use media queries because there is no magic - JavaScript is not available to use.
Alternatively you could create an A/B test for the two versions of your newsletter (Desktop & Mobile) with a link to an online alternate version (Desktop -> Mobile / Mobile -> Desktop). Use analytics determine whether or not the format is a factor and you could also identify which platform is most widely used, etc. The world is your oyster as they say but it seems like overkill - keep it simple and just use media queries.
There are a few resources online to help you with the media queries:
https://templates.mailchimp.com/resources/email-client-css-support/
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072404%2fhtml-newsletter-show-different-td-s-in-mobile-and-desktop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Media queries, despite your reluctance to use them, are your best option.
The only other tools which can dynamically adjust based on the height of something are:
- Percentage lengths … which don't let you pick between two fixed heights and which depend on the container not having
height: auto - JavaScript … which no email client will execute.
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
add a comment |
Media queries, despite your reluctance to use them, are your best option.
The only other tools which can dynamically adjust based on the height of something are:
- Percentage lengths … which don't let you pick between two fixed heights and which depend on the container not having
height: auto - JavaScript … which no email client will execute.
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
add a comment |
Media queries, despite your reluctance to use them, are your best option.
The only other tools which can dynamically adjust based on the height of something are:
- Percentage lengths … which don't let you pick between two fixed heights and which depend on the container not having
height: auto - JavaScript … which no email client will execute.
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
Media queries, despite your reluctance to use them, are your best option.
The only other tools which can dynamically adjust based on the height of something are:
- Percentage lengths … which don't let you pick between two fixed heights and which depend on the container not having
height: auto - JavaScript … which no email client will execute.
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
answered Mar 10 at 12:48
QuentinQuentin
660k749001059
660k749001059
add a comment |
add a comment |
The simplest solution is to use media queries because there is no magic - JavaScript is not available to use.
Alternatively you could create an A/B test for the two versions of your newsletter (Desktop & Mobile) with a link to an online alternate version (Desktop -> Mobile / Mobile -> Desktop). Use analytics determine whether or not the format is a factor and you could also identify which platform is most widely used, etc. The world is your oyster as they say but it seems like overkill - keep it simple and just use media queries.
There are a few resources online to help you with the media queries:
https://templates.mailchimp.com/resources/email-client-css-support/
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
add a comment |
The simplest solution is to use media queries because there is no magic - JavaScript is not available to use.
Alternatively you could create an A/B test for the two versions of your newsletter (Desktop & Mobile) with a link to an online alternate version (Desktop -> Mobile / Mobile -> Desktop). Use analytics determine whether or not the format is a factor and you could also identify which platform is most widely used, etc. The world is your oyster as they say but it seems like overkill - keep it simple and just use media queries.
There are a few resources online to help you with the media queries:
https://templates.mailchimp.com/resources/email-client-css-support/
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
add a comment |
The simplest solution is to use media queries because there is no magic - JavaScript is not available to use.
Alternatively you could create an A/B test for the two versions of your newsletter (Desktop & Mobile) with a link to an online alternate version (Desktop -> Mobile / Mobile -> Desktop). Use analytics determine whether or not the format is a factor and you could also identify which platform is most widely used, etc. The world is your oyster as they say but it seems like overkill - keep it simple and just use media queries.
There are a few resources online to help you with the media queries:
https://templates.mailchimp.com/resources/email-client-css-support/
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
The simplest solution is to use media queries because there is no magic - JavaScript is not available to use.
Alternatively you could create an A/B test for the two versions of your newsletter (Desktop & Mobile) with a link to an online alternate version (Desktop -> Mobile / Mobile -> Desktop). Use analytics determine whether or not the format is a factor and you could also identify which platform is most widely used, etc. The world is your oyster as they say but it seems like overkill - keep it simple and just use media queries.
There are a few resources online to help you with the media queries:
https://templates.mailchimp.com/resources/email-client-css-support/
https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
answered Mar 10 at 13:16
Dan NagleDan Nagle
1,9321917
1,9321917
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072404%2fhtml-newsletter-show-different-td-s-in-mobile-and-desktop%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Media queries should work in HTML email on modern phones. Pretty much all desktop HTML email clients are great - it's just Microsoft Office Outlook that's awful - and that doesn't run on Mobile so you're fine.
– Dai
Mar 8 at 23:34
@Dai Well, I happen to have a Windows phone with Outlook on it.
– Mr Lister
Mar 10 at 12:36
@Dai — itunes.apple.com/gb/app/microsoft-outlook/id951937596?mt=8
– Quentin
Mar 10 at 12:46
@Quentin Outlook on iOS and Android uses the phone's native WebView (a Safari or Chrome view) to render HTML emails. I'm talking about desktop Outlook 2007, Outlook 2010, Outlook 2013, Outlook 2016, and Outlook 2019 that all use Office Word (seriously) to render HTML emails.
– Dai
Mar 10 at 18:53