Why when activating the mobile version of a landing page, does the mobile landing page then appear blank?

[Anonymous]

I have tried this on a landing page created from our own template, but also with one from the Standard Marketo Template for landing pages.

I go through the process of creating a new landing page from the chosen template and the click Edit Draft. I then see my Desktop landing page and click the Mobile tab. It says, "Mobile Version - Automatically activate a mobile version of your landing page" with an Activate button which I click.

It shows "Activating mobile version" for a few seconds and for a split second I have seen the the layout from the desktop version displayed in the mobile version, but then it goes completely blank - the page is completely empty yet the desktop version has a header, logo, footer etc as designed in the template.

As I say, this isn't just happening with our own template, it is happening with Marketo's own sample template too.

Please advise.

Thanks in advance,
Peter

[Robb_Barrett]

Thanks Justin Cooperman​, I figured out the problem: NEVER hit "Validate Mobile Compatibility" on your templates!

Why use free form instead of guided?  I dunno...just more used to using free form I guess. I haven't taken the time yet to learn the guided ones and I don't necessarily understand how there's a difference in just hard-coding HTML / CSS / JS. A template should be a template.

[Justin_Cooperm2]

I just responded to that thread. It's not a problem, it's a feature. If you are using a "Free Form" page and choose to "Activate a Mobile Version of your Page" you are, in essence, instructing Marketo to automatically build a mobile view of your absolute-positioned page, because the page wasn't built to be responsive.

I highly recommend you use Guided landing page templates and editor. It is more suited for what you are doing. But, I can vouch for the fact that we have tons of customer that rely on the auto-build mobile view for their templates that aren't responsive. Not everyone has technical resources to build responsive landing page templates suited for Guided mode.

Justin

[Robb_Barrett]

Indeed. I've updated the thread after learning that someone had Activated Mobile and not informed me. I've played around with the Guided pages a little bit and I don't like them as much as I like writing a Free Form template and hard-coding in tokens to the template. From there, a standard Marketer can just edit a Rich Text token and put in all sorts of lovely changes to the content without ever needing to know how to use the LP editor. Also, when we want to make major changes to our look and feel, we can write a new template referencing the same tokens, add a new LP based on those tokens into the program and we don't need to add the content in. This has made updating templates a so darn easy and it's given my standard marketing users an easier way to create programs without needing to know the email editor or the LP editor.

[Justin_Cooperm2]

You can hard code tokens into a Guided page still, so that workflow should work. The only thing you can't do is change the template that an old existing Guided page is using. If that is what you're referring to in the end of your comment, then that is the only negative for you. However, you could certainly create new Landing Pages in programs that leverage a new Guided LP Template with all the same tokens you always use. So, the end marketers are still only editing tokens.

Justin

[Robb_Barrett]

While I can see the value and benefit of Guided for many people, I've yet to be convinced that a Guided LP allows the flexibility, creativity or ease of use as an old-fashioned Free Form template with tokens coded to it. It certainly does allow for a more rigid template but, in my opinion, lacks the ability for easily customized areas and it requires the end user to be trained on how to use the guided landing page editor.  My marketing users are more comfortable with a rich text editor which allows them MS Word style editing of content areas on pages / emails without disturbing important elements. I like that I can create a template with different break points if needed and don't need to memorize a bunch of Marketo specific code that I have to add to all of my elements. Perhaps I just haven't had enough exposure, but in my opinion  a Guided page requires more work not only at the template creation level but also at the content population / update level. It also seems like any small change requires a new template.

In the end, if we're writing templates from scratch we need to code in Mobile / Desktop CSS regardless of how we choose to populate the page.

[Robb_Barrett]

I'm having this issue currently and it's extremely annoying.  I've written up a perfectly nice mobile friendly page and CSS with media queries and all that good stuff.  Now it won't show on mobile devices. Out of the blue this happened....it had been working fine and then suddenly it added in all that stupid mktoMobileHide nonsense.

I'm dumbfounded as to why this would be a useful feature. Why on earth would anyone want Marketo to insert code that maliciously appends itself to all child elements, almost virus like?  What good does this do?

[Justin_Cooperm2]

Robb,

Why use "Free form" pages if you've coded a template that already builds in the media queries? You'll get no value out of it. The "Free Form" product is really for the bucket of customers that either need flexibility to fully design the LP via drag-and-drop or simply aren't comfortable with HTML/CSS. It sounds like you are, so why not just use a "Guided" page? In a "Guided" page, there is no such thing as "Activate for Mobile" in which Marketo adds all the classes you're mentioning. The reason is it is built for more advanced templates, like yours, that already built the responsiveness into the template. For absolute-positioned templates with no responsiveness, the "Free form" experience is quite helpful.

Justin

[Justin_Cooperm2]

Also, I did also just follow-up and confirm that nothing has changed in our landing page products recently. My guess is someone "activated the free form page for mobile" which caused the issue you're seeing. Obviously, if your page is already handling the responsiveness via media queries, there is no need to "activate for mobile" which is the feature that instructs Marketo to hide everything and produce a custom mobile view.

Thanks,

Justin

[Abdullah_Yahya]

I'm finding that the "mktoMobileHide" class gets added to all elements including child elements in the template such as header, footer and even <script> tags. Overriding this class with

html #bodyId .myForceShow {display:block;}

doesn't work well because not all elements are block level elements. So, I think a better and easier way is to just undo what Marketo is doing with some JavaScript.

(function ($) {
  /**
  * Strip out Marketo .mktoMobileHide class
  */
  $(document).on("ready", function () {
  $(".mktoMobileHide").each(function (index, element) {
  var classList = jQuery(element).attr("class");
  classList = classList.replace("mktoMobileHide", "");
  $(element).attr("class", classList);
  });
  });
}(jQuery));

This works for me.

[Robb_Barrett]

This isn't working for me.

[Justin_Cooperm2]

If you want this much control, why are you using "free form" landing pages. Why not just use a guided landing page template where you control all your content through media queries?

[Justin_Cooperm2]

I agree with all points. I'm going to chat with one of our engineers about introducing a special class name or syntax in order to let you specify that certain elements should not be hidden in the mobile view.

 

[Anonymous]

Has this been done?  Is there a special class name or syntax that will allow me to force my header to show on mobile?  I don't know why the Marketo code chooses to automatically hide my header with the mktoMobileHide class, but I'd really rather not have to overwrite it on every element.  Is there are a correct way to tell it that my header should remain on mobile (instead of forcing the display to block)?

[Justin_Cooperm2]

We've discussed this but haven't added a special class yet.

One of our engineers Ian Taylor​ had a recommendation similar to mine:

You can define your own, though, by being more specific than mktoMobileHide is.

mktoMobileHide is defined as: #bodyId .mktoMobileHide {display:none;}

So to override it you'd need to be more specific.

Here's a more specific selector that will win every time: html #bodyId .myForceShow {display:block;}

In your page template:

<style>html #bodyId . myForceShow {display:block;}</style>

<div class='myForceShow'>

  Content that I want to always appear on mobile here

</div>

… rest of template …

<div class='mktoContent'></div>

[Anonymous]

I guess that could work, except that the number of "mktoMobileHide" classes that get added to my header, footer, and all their children elements is higher than I'd prefer to have to overwrite - looks like more than 50 because of the lists and images and links in both.  And some of those shouldn't be display block at all, so I'd have to individually overwrite it for different pieces.

I guess I don't understand why Marketo is hiding my header/footer on mobile at all.  Would you be able to tell me how to work with Marketo properly so that it doesn't add the "mktoMobileHide" classes?   You mentioned that force overwriting the css wasn't recommended, but I didn't catch what the recommended way to tell Marketo I want an element to always be visible is.

(See my other post for more details if that'd help?)  I'm a web developer, but am still learning about how to adjust to work within the Marketo system to make things easy for my Marketing teammates.

[Anonymous]

The problem with this template tag "mktoMobileHide" is that it is added to each child element as well. So not only would you have to override the DIV or SECTION tag but each element inside of it as well. This also means that you have to restate its "display" status (Block, inline, inline-block, table etc.) with the !important for every element.

Not sure why it needs to be done in the first place as just adding the "mktoMobileHide" to the parent element is sufficient to hide it and most people will never need to override it

Is there some sort of global class that can get added to the template element that will forgo Marketo writing the mktoMobileHide into the element?

[Anonymous]

OK, thanks Justin. I appreciate your help with this.

Peter

[Justin_Cooperm2]

It's hard for me to help much more without seeing your code. But, if you do have experience with CSS, any CSS you apply with appropriate specificity will be respected. If you put style="display: block !important;" inline on an HTML element, for example, it would absolutely show up in all cases. That's not recommended but you get the idea. You can figure out what CSS you need to add to make it work.

[Marketo_Marketo]

.

[Anonymous]

Thanks again Justin. I do have experience with CSS and have added the CSS you suggested and added the class to each HTML element that needs to be carried through to the mobile version. It has updated the mobile version with some elements but something is still amiss though as the top banner logo has not been carried through and also the contact details in the panel above that - despite applying the same class rule to those elements also.

I don't know why. The syntax I used with the elements that have transferred through to the mobile version and those that haven't are the same. It's a shame to source code of the mobile version is not viewable as that might make it easier to trace the cause.

So thank you very much for your help - but do you have any other thoughts - or is the creating a mobile version from scratch using snippets more recommended?

Peter