Customer experience | Sales, Customer Insights,...

Email design not longer stacked

(0) Share

Report

Posted on by Filippa f

160

Hi all,

seems like there has been an update to the html code for the emails. But after this update my email is no longer stacked in mobile view.

Do any of you know how to fix this?

Thanks!

All responses (6)

Answers (0)

lml_Timo_lml 5 on at

Like (0)

Report
RE: Email design not longer stacked

I have the same problem when using images with a set height and width in the template. On desktop they are automatically assigned an inline style="width: 200px !important;" when switching to mobile view, the !important overrides anything you write in the media query, no matter if I also add 'width:100%!important;' in the classname. This caused any image to always be the size chosen in the content block, also in mobile view, which does not look very good.

Trying to bypass this by uploading images in the exact size, ex. 200px with "auto width" toggled "On" in the settings, caused images to be pixelated in mobile view, as the media query stated "width: 100%;" and just stretched the images to fit the media size.

The solution I found was to add two classes for each image on the img tag in the content block HTML, ex. an image of 200 width got these two classes:

I then added, in the HTML of the Email template, one class called:
.img-200 { width: 200px; height: auto; }

And another class under the preferred media query section called:
@media only screen and (max-width: 500px) { .mobile-imgfull { margin: auto !important; width: 100% !important; height: auto !important; } }

Then I uploaded the images in a format twice the size we needed, ex. an image set to 200x200 in the template is originally made as 400x400.

It doesn't look right in the content block itself, as the code is set in the main email template, but it seems to work when dragging the block into the template.

This fixes the issue by inserting images that are in a higher resolution, which in turn will look good when stretched to 100% width on mobile.

Hope this can help others too

Cheers! /Timo

alemieux69 on at

Like (0)

Report

RE: Email design not longer stacked

I'm experiencing the same. I've tried adding styles to circumvent this in my media query, but since all of the inline styles are set to !important, they don't do anything. Example:

table style="width: 100%; border-collapse: collapse;" class="containerWrapper tbContainer multi" cellpadding="0" cellspacing="0" border="0">
                          
                            
                              
                              
                                  
                                  
                                      
                                      
                                      	
                                      		
                                      	
                                      

                                      Read now
                                  
                                  
                              
                              
                              
                              
                                  
                                  
                                      
                                      Inflation: making us second guess our upcoming toner purchase
Did you know 38% of consumers are considering buying less beauty in the next six months due to inflation? 
Read more to learn how inflation is impacting the beauty shopper intent.

And can anyone make rhyme or reason for all of the classes that Dynamics puts into the tables and divs? There has to be a guide somewhere for this?

Filippa f 160 on at

Like (0)

Report

RE: Email design not longer stacked

I've created like 10 different emails and none of them get stacked when opened on mobile. I've made sure the whole section is colored or the image takes up the whole space. Nothing seems to work...
Suggested answer

Nya 29,058 on at

Like (0)

Report

RE: Email design not longer stacked

Hi,

In the latest version, when add a column into the designer, there will be a section containing the column, which does not exist in the old version.

In your screenshot, it seems that you added a background color for the whole section or column which contain the text “Test”. And there is a margin between the image itself and the column. So it will be relatively wider than the other components.

Please try to adjust the range of the background color.

If this helped you, I'd appreciate it if you'd mark this as a Verified Answer, which may in turn help others as well.

Best Regards,

Nya
Filippa f 160 on at

Like (0)

Report

RE: Email design not longer stacked

Hi Nya,

Thank you! I have the new update.

For example:

Here is an example. It gets smaller and two columns are not stacking. I have done nothing else with the code. Think that there has been an update of the code as well? But how do you fix this?
Suggested answer

Nya 29,058 on at

Like (0)

Report

RE: Email design not longer stacked

Hi Filippa,

I’d like to know more about the meaning of “stacked in mobile view”. Would you please to describe it more specifically? It would be appreciated if you could attach some screenshots.

If the issue is caused by the new editing experience, you can try to switch the designer into the old one.

If you cannot find the entrance of the drop-down list, you can just remove the New editing experience form from the App Designer of Marketing and publish it.

Also, if it is confirmed that the problem occurs in the new version, I suggest that you create a ticket for MS to resolve it.

If this helped you, I'd appreciate it if you'd mark this as a Verified Answer, which may in turn help others as well.

Best Regards,

Nya