Skip to main content
Christina_Euric
Christina_Euric
Level 2
January 9, 2019
Question

Email Template "Get Ready": Header is displayed incorrectly on mobile phone

  • January 9, 2019
  • 1 reply
  • 11340 views

Hi everybody!

We want to use the email template "Get Ready" for our newsletter.

The header in the template recommends the image size 660x228px.

I inserted the header with the right size and it is shown in Marketo and on the Desktop version in Outlook and Google Mail correctly.

But on the mobile phone (Gmail) it is displayed incorrectly.

I attach screenshots of the header.

Do you know why the header is displayed like that?

And what I could to do to change it?

Best wishes

Christina

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Grace_Brebner3
Grace_Brebner3
Level 10
January 9, 2019

Hey Christina,

We'd need to see the code to really be able to provide the fix but likely this an interaction of image size + background size/repeat instructions in the code. Likely the responsive arrangement makes the container larger than the original 228px high size of the image, and the code has been set to not allow the image to be stretched larger than its native size to fill the space.

You probably want to make sure the background styling is set to background-size: cover and background-repeat: no-repeat, but you may also want to consider tweaking either the size of the uploaded image (so that the mobile version doesn't look pixelated), and/or tweak the text styling so that the mobile container isn't so tall.

Hope that helps

    Christina_Euric
    Christina_EuricAuthor
    Level 2
    January 10, 2019

    Hi Grace,

    I checked the code and it has already the right settings:

    <td class="module" style="word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:${heroBackgroundImage};background-repeat: no-repeat;padding-left: 0;background-size: cover;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="${heroBackgroundColor}" background="${heroBackgroundImage}">

    The recommended image size for the header from the Template is 660x228 px.

    I already enlarged the size to 1.013x350 px but there still is a small bar visible from a repetition of the image on the mobile phone.

    Do you have any idea what the right image size is?

    Or how I can change the code to display the image correctly?

    Gerard_Donnell4
    Gerard_Donnell4
    Level 9
    January 10, 2019

    Without the code it is very hard to help you debug. Have you changed the size of the Font for mobile? You might need to make you font sizes smaller in the media query. Make it a lot smaller and see if it still occurs. It looks to me like your Font is so big or that there is so much text that it is spilling out of the div (stretching it) and therefore repeating the image.

    Terms & ConditionsAccessibility statement

    Loading footer...