Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

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

Go to solution
Anonymous
Not applicable
‎03-11-2015 10:36 AM
‎03-11-2015 10:36 AM

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

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
Labels:
Tags (1)
0 Likes
4,206
Reply
1 ACCEPTED SOLUTION

Accepted Solutions
Justin_Cooperm2
Level 10
Level 10
‎03-11-2015 02:41 PM
‎03-11-2015 02:41 PM

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

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

0 Likes
3,120
Reply
25 REPLIES 25
Justin_Cooperm2
Level 10
Level 10
‎03-11-2015 10:52 AM
‎03-11-2015 10:52 AM

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

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:
  1. https://docs.marketo.com/display/DOCS/Add+a+Mobile+View+for+Your+Landing+Page
  2. https://docs.marketo.com/display/DOCS/Customize+Mobile+View+for+Your+Landing+Page
  3. https://docs.marketo.com/display/DOCS/Make+an+Existing+Landing+Page+Template+Mobile+Compatible
0 Likes
3,120
Reply
Mikes_Jones
Level 8
Level 8
‎10-28-2015 09:05 AM
‎10-28-2015 09:05 AM

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

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

0 Likes
3,120
Reply
Anonymous
Not applicable
‎03-11-2015 11:31 AM
‎03-11-2015 11:31 AM

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

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
0 Likes
3,120
Reply
Justin_Cooperm2
Level 10
Level 10
‎03-11-2015 02:41 PM
‎03-11-2015 02:41 PM

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

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; }
0 Likes
3,121
Reply
Anonymous
Not applicable
‎03-11-2015 03:47 PM
‎03-11-2015 03:47 PM

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

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
0 Likes
3,120
Reply
Marketo_Marketo
Level 2
Level 2
‎03-11-2015 04:09 PM
‎03-11-2015 04:09 PM

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

.
0 Likes
3,120
Reply
Justin_Cooperm2
Level 10
Level 10
‎03-11-2015 04:11 PM
‎03-11-2015 04:11 PM

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

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.
0 Likes
3,120
Reply
Anonymous
Not applicable
‎03-12-2015 01:32 AM
‎03-12-2015 01:32 AM

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

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

Peter
0 Likes
3,120
Reply
Home