1

We've slowly been implementing marketing cloud more and more, and it's time to see if anyone knows why this happens.

Sometimes, when publishing a page, marketing cloud will decide to take it's global mobile styles css and insert it "randomly" into another style tag. For example, we had this line for Google Optimize inserted high up in the of our code:

 <!-- begin Google Optimize -->

<style>.async-hide { opacity: 0 !important} </style>

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new 
Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' 
?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function()
{i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXX':true});</script>

But upon reviewing our published/live code, this is what we see (and what is now saved in the same block in the editor)

 <!-- begin Google Optimize -->

  <style>.async-hide { opacity: 0 !important} @media only screen and 
(max-width:480px){
/* MOBILE GLOBAL STYLES - DO NOT CHANGE */
body, .tb_properties{font-family: Arial !important; font-size: 16px 
!important; color: #808080 !important; line-height: 1 !important; 
padding-top: 0px !important; padding-right: 0px !important; padding-
bottom: 0px !important; padding-left: 0px !important; 
}.buttonstyles{font-family: Arial !important; font-size: 16px 
!important; color: #FFFFFF !important; padding-top: 0px !important; 
padding-right: 0px !important; padding-bottom: 0px !important; 
padding-left: 0px !important; }h1{font-family: Arial !important; 
font-size: 22px !important; color: #202020 !important; line-height: 1 
!important; }h2{font-family: Arial !important; font-size: 20px 
!important; color: #202020 !important; line-height: 1 !important; 
}h3{font-family: Arial !important; font-size: 18px !important; color: 
#202020 !important; line-height: 1 !important; }a:not(.buttonstyles)
{line-height: 1 !important; }.mobile-hidden{display: none !important; 
}
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
}</style>

<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new 
Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' 
?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function()
{i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'GTM-XXXXX':true});</script>

We've seen this before, especially when we try to manually override the mobile styling with our own fonts etc, if you edit this block it seems to not detect it and adds it again above. Extremely irritating.

How do we get this to stop inserting code randomly, and is there a way to explicitly tell it the global style needs to respect the custom styling and fonts from our typekit etc?

  • I have worked with CloudPages a lot of the times and never experienced anything like this before. Can you please confirm which editor method are you using to build the landing page - Classic Editor or Content Builder? – Brad Sapkota Sep 27 '17 at 2:18
  • @bradSapkota We figured this out if you're curious – ModT Oct 22 '17 at 18:39
1

FYI to anyone who sees this in the future, I figured this out and you need to be aware: every time a landing page is saved/published, marketing cloud (cloudpages/content builder in particular) will check in the "code view section" to make sure that their default mobile global styles template is perfectly complete and unaltered. Basically everything between and including the

 <style>@media only screen and (max-width:480px){
      /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
...
/* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
      }
    </style>  

block cannot be a character different. Additionally, this must be the FIRST style tag on the page. If you modify the "mobile global styles" tag, marketing cloud will assume it's missing and attempt to add it again. It will also sometimes re-insert this code UNDERNEATH your modified block, which means the next time you save it will add it in a 3rd time, and a 4th...

Anyway. The workaround is to make sure this one block is up top and before any other style code. You'll notice in my example above, the google optimize code snippet (which needs to be as high up as possible) contains some CSS, in particular to let it show/hide different versions of the page without the A test flashing on screen before the B test.

For marketing cloud, this is no bueno, so after a save and publish it injected that mobile styling into that first style tag even though the same unmodified code is lower down the page.

So the TL;DR:

be sure that the very first style tag in the head is an unmodified default mobile global styles. If it's not first and unchanged, you're going to have a bad time. You can directly underneath it add a modified version, of course.

| improve this answer | |
0

This was bugging me as well, Salesforce insists on re-inserting this every time you remove it. However, I found that if you modify the media query and just set it to 0px then it won't detect it. It's an incredibly hacky way to do it but I needed those styles gone and this seemed to work.

<style>@media only screen and (max-width:0px){
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.