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

[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?

[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.

[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.

[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?

[Robb_Barrett]

This isn't working for me.

[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