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

Anonymous · ‎03-11-2015

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

Justin_Cooperm2 · ‎03-11-2015

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; }

View solution in original post

Justin_Cooperm2 · ‎03-11-2015

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; }

Anonymous · ‎03-11-2015

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_Cooperm2 · ‎03-11-2015

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:

Justin_Cooperm2 · ‎10-28-2015

https://docs.marketo.com/display/DOCS/Add+a+Mobile+View+for+Your+Free-Form+Landing+Page

https://docs.marketo.com/display/DOCS/Customize+Mobile+View+for+Your+Free-Form+Landing+Page

https://docs.marketo.com/display/DOCS/Make+an+Existing+Free-form+Landing+Page+Template+Mobile+Compat...

Mikes_Jones · ‎10-28-2015

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 >_<