George Guthrie
Hi all,
Trying to tinker with how communications are displayed, depending on if you're viewing via Outlook, iPhone/Android email browsers.
I've found for Outlook you can use:
<!--[if gte mso 9]>
< <![endif]-->
to help define set formatting rules for Outlook.
I'm hoping for a similar conditional statement for the xMatters application viewer - any tips?
Thanks,
George
0
Comments
Please sign in to leave a comment.
Hey George - what do you mean by the "xMatters application viewer"?
Hi Nick, Cameron,
Many thanks for your replies. To clarify, I've tested the Outlook conditional code via xMatters view source and it works great.
What I'm hoping for is if there is an equivalent conditional code used to determine how xMatters communications are displayed in the xMatters mobile applications (iPhone and Android).
For example, I currently have a font size of 16px for headings, which works great when viewed via desktop web browsers and Outlook. However, on the xMatters mobile applications these are displayed rather small, and zooming in is needed to view them at an acceptable size.
Therefore, I was wondering if xMatters were aware of a similar conditional css code that could be used for the xMatters mobile applications?
Thanks again for your help so far
George
Hey George,
You can absolutely target smaller devices such as iPhones and Android's using syntax known as CSS media queries. It's the same code that websites use to conditionally render content for smaller devices.
This article explains it in more depth, but essentially you would include something like this for targeting smaller devices:
@media screen and (max-width:600px) {
h1 {
font-size: 12px;
}
}
Breaking it down, the "screen" keyword means that it will only affect devices with a screen, which excludes things like printers. The "max-width" attribute means that this code will only take effect if the screen is less than 600 pixels wide. Anything wider will get your normal styles.
Hope that answers your question. Good luck!
Nick
That's perfect, and works just as needed!
Cheers Nick