Aligning Rich Text in a Landing Page

[Anonymous]

I have a question for the community. I designed a simple Landing Page template for our client and wanted to know what I needed to do to get all the rich text that the client wants to add to this template to be centered on the page (the DIV that contains the rich text - not the text itself. The text will be left-aligned). I have it so that the minimum width be 625 px but the overall width is set at 70% of the browser width. Where in the template that Marketo starts you with do I edit to make this possible? Is it the "mktContent" class or the "mktColumn" one? Right now, when adding a rich text element, the rich text goes over the width. See the link here:

http://info.xtremio.com/Mahalo-Landing-Page-Test1.html

. . . and adjust your browser width to see what I am talking about. Thanks!

[Anonymous]

Hmmm, that's strange because I have done a number of tests WITH dragged content using this template and it works just fine across all browsers and all OS systems for me.

Here is an example with the graphic, text and Pull Quote all being rich content dragged unto to the stage and centering just fine.
http://info.xtremio.com/Landing-Page-Demo-V3.html

. . . and here is the "blank" template file that I used:

http://info.xtremio.com/Blank-Page.html

I tried to "break" it but everything seems to work out just fine. Can you test this template out and see if you can get dragged content NOT to be relative-positioned? I couldn't.

Thanks for your time on this. I really appreciate it.
 

[Justin_Cooperm2]

That won't work if the person editing the landing page drags content onto the page. All elements are absolute-positioned that are dragged onto the page. The only way to make content inherit the style of the template is if you use tokens, as I show above. 

I agree it's not ideal but we're currently making several improvements to landing pages at the moment.

[Anonymous · Accepted solution]

Thanks Justin, but I figured out that any Rich content goes in the Inner DIV so I just made the Outer one like this:

div#outerWrapDiv {
  height: 100%;
  width: 100%;
  }


. . . and the Inner one like this:

  
  div#innerWrapDiv {
  position: relative;
  width:960px;
  height:100%;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
}

. . . and that seemed to fix it. 


I just wished there were some text document stating where any "dropped" or "Rich" content goes so I didn't have to hunt this down or do a "trial and error" to find out. Or at least better comments in the template file.

[Justin_Cooperm2]

Add this to your template:

<div style="margin-left:auto; margin-right:auto;height:100px;width:200px;">{{my.RichTextToken}}</div>

Then tell them to simply create a rich-text program token on the program that contains the landing page and enter their rich-text there.