Mobile Activity Detail Page Layout

If you are using Activity Detail Pages, they should be mobile friendly. In order to accomplish this, you can copy/paste the HTML below into the Activity Detail Page content editor and then make adjustments to the items you want/need.

  
<div class="imod_eventDetails">
  <h2 class="imod_eventName">[[Activity Name]]</h2>
  <div class="imod_eventButtons">[[Registration Button]] [[Attendees List Button]]</div>
  <div class="imod_eventDescription">[[Activity Description]]</div>
  <div class="imod_eventContact">
    <h3 class="imod_eventLabel">Contact Information</h3>
    <div class="imod_eventContactPrimary">
      <h4>Primary Contact</h4>
      <div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
      <div>[[Contact1 Street1]]</div>
      <div>[[Contact1 Street2]]</div>
      <div>[[Contact1 City]]<span id="contactseparator1">, </span>[[Contact1 State]] 
      [[Contact1 Postal Code]]</div>
      <div>[[Contact1 Phone]]</div>
      <div>[[Contact1 Fax]]</div>
      <div>[[Contact1 Email]]</div>
    </div>
    <div class="imod_eventContactSecondary">
      <h4>Secondary Contact</h4>
      <div>[[Contact2 First Name]] [[Contact2 Last Name]]</div>
      <div>[[Contact2 Street1]]</div>
      <div>[[Contact2 Street2]]</div>
      <div>[[Contact2 City]]<span id="contactseparator2">, </span>[[Contact2 State]] 
      [[Contact2 Postal Code]]</div>
      <div>[[Contact2 Phone]]</div>
      <div>[[Contact2 Fax]]</div>
      <div>[[Contact2 Email]]</div>
    </div>
  </div>
  <div class="imod_eventDateLocation">
    <h3 class="imod_eventLabel">Date &amp; Location</h3>
    <div class="imod_eventDate">[[Date Range]]</div>
    <div class="imod_eventLocation">
      <span class="locationLabel">Location:</span> [[Location Name]]
      <div class="imod_eventLocationDirections">[[Location Directions]]</div>
    </div>
  </div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>