HTML Newsletter show different 's in mobile and desktopWhat 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?
Infinite Abelian subgroup of infinite non Abelian group example
How could indestructible materials be used in power generation?
Why can't we play rap on piano?
If human space travel is limited by the G force vulnerability, is there a way to counter G forces?
Theorems that impeded progress
Assassin's bullet with mercury
Neighboring nodes in the network
Can a rocket refuel on Mars from water?
Can I use a neutral wire from another outlet to repair a broken neutral?
AES: Why is it a good practice to use only the first 16bytes of a hash for encryption?
Why is consensus so controversial in Britain?
How can I prevent hyper evolved versions of regular creatures from wiping out their cousins?
Is it possible to download Internet Explorer on my Mac running OS X El Capitan?
What killed these X2 caps?
RG-213 Cable with electric strained wire as metallic shield of Coaxial cable
What's the difference between 'rename' and 'mv'?
How to say in German "enjoying home comforts"
How do I write bicross product symbols in latex?
Stopping power of mountain vs road bike
Is it canonical bit space?
In Romance of the Three Kingdoms why do people still use bamboo sticks when papers are already invented?
Anagram holiday
1960's book about a plague that kills all white people
How to model explosives?
HTML Newsletter show different
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.5k1078121
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.5k1078121
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.5k1078121
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.5k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
edited Mar 10 at 12:34
Mr Lister
35.5k1078121
asked Mar 8 at 23:29
new_codernew_coder
767
edited Mar 10 at 12:34
Mr Lister
35.5k1078121
edited Mar 10 at 12:34
Mr Lister
35.5k1078121
edited Mar 10 at 12:34
Mr Lister
35.5k1078121
35.5k1078121
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
657k728951056
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
657k728951056
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
657k728951056
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
657k728951056
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
657k728951056
answered Mar 10 at 12:48
QuentinQuentin
657k728951056
answered Mar 10 at 12:48
QuentinQuentin
657k728951056
answered Mar 10 at 12:48
QuentinQuentin
657k728951056
657k728951056
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