Email display error

[C_Blakeley]

Hello Community, 

We are seeing an error in how an email is displayed, most specifically when viewing the email in Gmail.

Viewing the email in outlook does not display the error and displays all ok. (viewing as a broadcasted email and not as a test email)

We use a business branded template to produce a newsletter every month and the previous months have not presented this error. 

You can see on the screenshot that there are strange grey/white blocks and the formatting has shifted CTA buttons to the left. 

Has anyone experienced anything similar or could help point me in the right direction? 

Thank you 

[Dave_Roberts · Accepted solution]

It looks like the images might be too wide and forcing the layout to shift to the right too much which might be what's making the text spill out of the box like that?

1. Is the view you shared here a mobile-sized view or is this what you're seeing at desktop size?

2. Are the image, text, button and divider all in the same module or are those different pieces in the layout? 

3. Is the image placed into an editable text module rather than an image module? Are you able to share some screenshots of the editor-view when you click into the images to edit them in the Marketo Editor? 

Also, it might be helpful to share the code for this section if possible so that we can try and identify if there's an issue with the way this is coded. 

As a short-term troubleshooting solution, maybe try and remove the images and resend the email and see if you still get the layout shifts. My guess would be that this might fix the issue and help to identify that it's something to do with the images and how they're setup in your email.

[C_Blakeley]

Hi Dave, 

Thank you for your reply. 

1. Mobile sized view 

2. The image and text is in the same module. The button and divider are separate modules. 

3. Yes the image is placed in a text module, which may explain if there too large for the text module and spill over. 

Removing the images did correct the error, thank you. 

Our template is quite limited and I dont have image only modules, which makes things tricky, hence trying different approaches like this one. 

Thank you for your help. I think I need to consider reviewing our email template module options. 

Thanks again 

Cathy  

[Dave_Roberts]

Hey Cathy, glad that worked out for you. I think you're on the right track with looking to do a review of the modules you have available in your email template and getting something that'll work for adding images in a consistent way. There's a bunch of little nuanced ways that images can go sideways in email like the issue you ran into here and a well-crafted module can help to make this a lot easier on you. 

Normally when we roll out a new email template, they've got a few "image-only" modules in them. One of them goes edge-to-edge to use as banner image, usually at the top of the email. The other is inset to align with the edges/margins of the email and is adjustable from a max width (560px) down to any other size you'd want to use (ex. 100px) and the height can also be adjust to whatever the image calls for. There are some controls to adjust the image to align left/right/center and also to position the image differently for mobile than for desktop. These might be some nice-to-have options if you do end up looking to get something coded up to extend the utility of your email template.  Here's a look at these two modules for a visual reference:

[uditmathur]

Hi C_Blakeley,

This might be the issue related to alignment. 

You can try using inline styling in your code for example 

instead of using align="left", also include inline style to float (style="float:left;").

instead of using align="right" ,also include inline style to float (style="float:right;").

But to understand this best its recommended if you can share the code to have good understanding of the issue.