CMS Development

CaptainToby
Membre

Responsive images for emails - seperate images for mobile and desktop

Résolue

Hi Y'all,

 

We have been referred here by Hupsot support. We have been having trouble with our email templates on hubspot displaying our email images responsively and was hoping someone could help!

 

Currently our email template is designed to show one image for mobile and a different image for desktop. We hide the mobile image for desktop by making it 1x1px and then scale responsively using CSS for mobile.

 

We were able to do this on our previous platform as the 1x1px image would be scaled to it's original size, whereas on Hubspot we're seeing the 1x1px stretch to the new size, rather than the full image loading (see below).Image not displaying correctly in mobile version - relevent html visible to right lines 138-143Image not displaying correctly in mobile version - relevent html visible to right lines 138-143

 

The strange thing is the code responds as expected outside of hubspot - it is only when loaded into hubspot that the problem occurs. And, we think may be linked to when we re-hosted the images for the email on Hubspot rather than our original platform.

 

Mobile version of image displaying correctly outside of hubspotMobile version of image displaying correctly outside of hubspot

desktop version of image displaying correctly outside of hubspotdesktop version of image displaying correctly outside of hubspot

Does anyone know why this might be occuring and how we could fix it?

 

And, if not does anyone have a solution for how to display a seperate image for mobile and desktop using hubspot?

 

Thank you massively in advance!

0 Votes
2 Solutions acceptées
jackjadish
Solution
Membre

Responsive images for emails - seperate images for mobile and desktop

Résolue

Hi,

 

First make sure that I understood your requirements well, If not please correct me. 

 

My suggestion is you can add media queries for the particular device in the header section. head.png

 

As shown in the above image, please choose head section and enter images with media queries which will be support for the responsive devices. 

Voir la solution dans l'envoi d'origine

0 Votes
Jsum
Solution
Conseiller clé

Responsive images for emails - seperate images for mobile and desktop

Résolue

Media queries aren't recognized by some email clients (including the android gmail app!?!?) I always suggest to avoid using them all together.

 

Also Hubspot forces some css on mobile that is pretty annoying. If you check your inspector you will see something like:

img {
    width: 100% !important;
    height: 100% !important;
}

This could be causing your issue. 

Voir la solution dans l'envoi d'origine

0 Votes
4 Réponses
jackjadish
Solution
Membre

Responsive images for emails - seperate images for mobile and desktop

Résolue

Hi,

 

First make sure that I understood your requirements well, If not please correct me. 

 

My suggestion is you can add media queries for the particular device in the header section. head.png

 

As shown in the above image, please choose head section and enter images with media queries which will be support for the responsive devices. 

0 Votes
CaptainToby
Membre

Responsive images for emails - seperate images for mobile and desktop

Résolue

Hi,

 

Thank you so much for taking the time to respond 🙂

 

We currently already use media enquiries to scale the images. And, the code responds as expected outside of Hubspot. It is only when the images are hosted on Hubspot that the code no longer reponds as expected. We are currently using a work around of hosting the images externally. But are interested to know why the issues might be occuring, as well as best practice on Hubspot when using a seperate image for desktop and mobile versions of the email.

0 Votes
Jsum
Solution
Conseiller clé

Responsive images for emails - seperate images for mobile and desktop

Résolue

Media queries aren't recognized by some email clients (including the android gmail app!?!?) I always suggest to avoid using them all together.

 

Also Hubspot forces some css on mobile that is pretty annoying. If you check your inspector you will see something like:

img {
    width: 100% !important;
    height: 100% !important;
}

This could be causing your issue. 

0 Votes
jackjadish
Membre

Responsive images for emails - seperate images for mobile and desktop

Résolue

That may be the cerification http | https pags, so there is a chnace for image loading issue.

I'm not sure. But I have seen this kind of issue. 

0 Votes