HTML Email Responsive-CodePudding

Hi everyone I would like to create two versions of my code one for desktop and another for mobile.

This is because I need to change some texts and images to mobile respect desktop version.

As an example of what I tried.

If anyone knows how I can do solve this, please help me.

<style>
  .desktop {
    display: none;
  }
  <!-- Small devices -->@media screen and (max-width: 480px) {
    .mobile {
      display: block;
    }
  }
</style>

<body>
  <div class="desktop">
    <table bgcolor="#0d0d0d" width="620" align="center" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#0d0d0d" align="center">
          <table align="center" bgcolor="#0d0d0d" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!--Image Version 1 Desktop -->
                <img src="CarImage_v1.png" style="display:block; border:0" />
              </td>
            </tr>
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!-- Car Text  Version 1 Desktop -->
                <p style="font-family: Arial; color:#c2c2c2; font-size:20px;">
                  Superior en todo. <br/> Incluso en clase.
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div class="mobile">
    <table bgcolor="#0d0d0d" width="620" align="left" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <table align="center" bgcolor="#0d0d0d" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!--Image Version 2 Mobile -->
                <img src="CarImage_v2.png" style="display:block; border:0" />
              </td>
            </tr>
            <tr>
              <td align="center" bgcolor="#0d0d0d">
                <!-- Car Text Version 2 Mobile -->
                <p style="font-family: Arial; color:#c2c2c2; font-size:20px;">
                  Cuando la deportividad y <br/> la clase se entiende
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

--- What I want ----

Desktop version

Mobile version

CodePudding user response：

As of late 2021, you can safely use @media in HTML emails' stylesheets to alter the style, layout, and to an extent: the content, of a HTML email based on the email software's viewport size - which serves as an adequate proxy for the mobile vs. desktop use-cases.

_{Note that as of November 2021 the CanIEmail.com page linked above currently describes 36% e-mail programs fully supporting @media rules, and the next 39% of e-mail programs only partially supporting @media (but they still support what we need: min/max-width). That's only 75% support... however: we only need all mobile e-mail apps to support @media: it doesn't matter if a desktop e-mail app supports it or not - so that's why it's OK to use it.}

The only hold-out is Office Outlook for the Windows desktop, but that's fine as you can make the "desktop" version the default in your stylesheet.

Something like this:

img {
    border: 0;
    margin: 0;
}

p {
    font-family: Helvetica, Arial, sans-serif;
    color: #c2c2c2;
    font-size: 20px;
}

/* By default, assume a desktop browser or e-mail client: */
/* (As all mobile e-mail viewers do support (at least basic) CSS media queries. */

.mobileOnly {
    display: none;
}

@media (max-width: 767px) {
/* Assume mobile devices are < 768px wide (as the original iPad in portrait was 768px wide, I assume you want desktop view for large tablets) */

    
    .desktopOnly {
        display: none;
    }
    .mobileOnly {
        display: block;
    }
    span.mobileOnly {
        display: inline;
    }
}

<div class="desktopOnly">
    <img src="CarImage_v1.png" />
    <p>Superior en todo. <br/> Incluso en clase.</p>
</div>

<div class="mobileOnly">
    <img src="CarImage_v2.png" />
    <p>Cuando la deportividad y <br/> la clase se entiende</p>
</div>

However, as I mentioned in the comments, you don't need to have separate <img /> and text content for each device. In your case the image itself looks the same, just zoomed and cropped, in which case use object-fit in the img rule in your small-screen @media section. And the text can be controlled with <span>:

img#carImage {
    object-fit: contain;
}

@media (max-width: 767px) {
    
    img#carImage {
        object-fit: cover;
    }
}

Also consider using transform: scale and clip for additional effects.

...and text can be visible/hidden using <span >, like so:

<div>
    <img id="carImage" src="CarImage.png" />
    <p>
        <span class="desktopOnly">Superior en todo. <br/> Incluso en clase.</span>
        <span class="mobileOnly">Cuando la deportividad y <br/> la clase se entiende</span>
    </p>
</div>

CodePudding user response：

@javi-ur96,

As I understand all you want is to do is to display the mobile version or the Desktop version depending on the screen size.

You can use javaScripts function and just make use of the else if condition to render the page depending on the screen size.

but I don't think it is a good practice. Instead go with the below options.

Make use of the grid property to make the same content become responsive. So you will SAVE a whole lot of file size and coding.

You can find great examples in this LINK to suit your needs.
Instead of switching the div elements w.r.t desktop or mobile, create just one version of it and try to switch their properties depending on the screen size.

You can find example links below:

Typical Media Query Breakpoints You can also display images of different sizes as you need.
Responsive Web Design using Media Query This shows you how you should build your website.