A

Anonymous

Solved

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

Forum|Forum|11 years ago
March 11, 2015
12 replies
7404 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Justin_Cooperm2

If that's what you want to do (it's not recommended), you'll have to code it manually in CSS. If you don't already know how to do this, then I would very strongly recommend avoiding it. Doing this is complex and you really need to have expertise with CSS specificity to make it work correctly. Instead, I would just put your mobile headers/footers in snippets and insert them that way (it will also let you edit those elements in one place and have it apply to all your pages).

If you reeeeeeeally want to know how it's done in CSS, I'll be nice and still tell you. But please be warned this could have a negative outcome if you don't understand how this works. Add the following CSS in the <head> section of your landing page template, then apply the "alwaysShow" class to whatever HTML element you want to stay visible when the mobile view appears.
html #bodyId .alwaysShow { display:block; }

Justin_Cooperm2

Level 10

Yes, only "page elements" are copied over to the mobile view. If you want template elements to appear you would have to use custom CSS to make that happen (a bit more advanced).

Check out the documentation:

Mikes_Jones

Level 7

why does Marketo consistently change the links to their docs? It sucks to stumble across what looks like relevant links only for them to be dead >_<

A

Anonymous

Thank you Justin for explaining why this is happening. I have looked at the 3 articles you linked to, but unless I am missing something on them, I cannot see any information about what custom CSS is need to display the 'template elements' in the mobile view. Have I misunderstood or is there another article which shows what custom CSS is needed?

Thanks in advance,
Peter

Justin_Cooperm2Accepted solution

Level 10

If that's what you want to do (it's not recommended), you'll have to code it manually in CSS. If you don't already know how to do this, then I would very strongly recommend avoiding it. Doing this is complex and you really need to have expertise with CSS specificity to make it work correctly. Instead, I would just put your mobile headers/footers in snippets and insert them that way (it will also let you edit those elements in one place and have it apply to all your pages).

If you reeeeeeeally want to know how it's done in CSS, I'll be nice and still tell you. But please be warned this could have a negative outcome if you don't understand how this works. Add the following CSS in the <head> section of your landing page template, then apply the "alwaysShow" class to whatever HTML element you want to stay visible when the mobile view appears.
html #bodyId .alwaysShow { display:block; }

A

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

M

Marketo_Marketo

Level 2

.

Justin_Cooperm2

Level 10

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.

A

Anonymous

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

Peter

A

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

Level 10

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.

A

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

Level 10

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>

A

Abdullah_Yahya

Level 1

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

Level 10

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?

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded