Adaptive CSS LAyouts in Marketo?

Anonymous
Not applicable

Adaptive CSS LAyouts in Marketo?

Has anyone successfull implimented an adaptive CSS framework like ZURB with marketo form layouts?

If yes do can I email you off line to ask questions about your approach? 

Doed anyone know of any good blog articles that address this challange with marketo?


Tags (1)
6 REPLIES 6
Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

Hello! 

I haven't done this, but are you familiar with how to edit standard templates in the template editor?

I think you could definitely do this by simply modifying the css on the required Marketo DIV IDs, like "outerWrapDiv" and "innerWrapDiv", and then including ZURB code within this container....

Then, include link and script tags that reference the ZURB libraries...

I may try this!  




Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

What about the absolute postioning of elements once the marketing author has dragged and droped items the screen? The last time I tried this it broke the UI for the form builder...  

Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

In the landing page editor, have you tried adjusting the width of the elements via the property sheet?  

You can specify percentage widths for each of the elements here.  Unfortunately, it won't allow you to change the "position" property, so you can't specify relative positioning.  
Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

Another question....  I am assuming you are thinking about doing this in javascript to manipulate the DOM elements? 

If yes it seems like you may get wonkyness when the page loads becuase you are creating the prersentation at the DOM ready event...  Would you then hide the page on load... Manipluate the DOM...  Then fade the page in?  Would this impact SEO by setting a display none on the overall wrapper DIVs?

Steve

Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

"In the landing page editor, have you tried adjusting the width of the elements via the property sheet?  

You can specify percentage widths for each of the elements here.  Unfortunately, it won't allow you to change the "position" property, so you can't specify relative positioning. "



Thank you for the response and help.... To ensure clarity...  So what you are suggesting is creating a wrapper that all the absolute postioned items postion to verse having them postioned to the body tag...   This way when the page collapese to mobile or tablet they will be in line with the wrapper tag...  

I am still not fully picturing your suggested solution...  Becuase it would seem like if they are positioned absolute and the left value is at 60px, and the top is at 100px, and a width of 20%...  No matter what happens when the page collapses it will render off outside of the browser window... 
Anonymous
Not applicable

Re: Adaptive CSS LAyouts in Marketo?

There was another discussion similar to this here: https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PWbrAAG

It looks like, as of right now, it is not entirely possible.