Re: 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

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

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

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

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

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

Marketo_Marketo · ‎03-11-2015

.

Justin_Cooperm2 · ‎03-11-2015

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.

Anonymous · ‎03-12-2015

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

Peter