- This topic is empty.
-
AuthorPosts
-
July 23, 2014 at 11:59 pm #176273
samclauw
ParticipantHi all, I’ve made a responsive e-mail template (600px wide). There’s one media query that change the block system when the browser width is smaller than 480px:
@media only screen and (max-width: 480px) {
…
}For the iPod touch client (screen size smaller than 480px), the mobile version is taken and it fits my needs. However, on a Samsung Galaxy S III for example, it doesn’t show up as I wish. It takes the 600px layout and it results in a hard to read font size.
I’ve read some documentation and it’s all about the device pixel ratio. For the Samsung Galaxy S III, it’s “2”. Unfortunately, it’s hard to understand how I could change my media query so such devices does show the mobile version of my template.
Is there anyone who can assist me on this? Or someone who knows a site with a very good device pixel ratio explanation? Thx! ;)
July 24, 2014 at 12:46 am #176276Mehul Golania
ParticipantHI,
you can simply use the width 100% for the particular elements.
July 24, 2014 at 1:08 am #176281samclauw
ParticipantThat’s how I did it already ;)
<td>’s got a width of 100% and a “display: block” as a style attribute. My problem is that devices with a device pixel ratio highter than 1 aren’t showing the 480px wide version of my e-mail template. They show the 600px version and everything is shrunked to fit the screen size. That results in very hard to read paragraphs :)July 24, 2014 at 1:36 am #176283MDMueller
ParticipantDo E-Mail-Clients support mediaQueries? AFAIK, the CSS-support from E-Mail-Clients is really horrible. i.e. Outlook doesn’t even support basic stuff like display, float, clear
A nice overview about supported Features: https://www.campaignmonitor.com/css/
Edit: I might be mistaken – you’re talking about an E-Mail-Template shown in webbrowser?
July 24, 2014 at 2:21 am #176291samclauw
ParticipantThe media queries are supported on most mobile devices an that’s why it’s (in my opinion) very important to use them when creating an email template. So in fact, I’m talking about an e-mail template shown on a mobile device (Samsung Galaxy S III for example) ;)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.