In order to make your Event Detail Page mobile friendly, you can copy/paste the HTML below into the Detail Page content editor and then make adjustments to the items you want/need.
Layout Option #1:
Code:
<div class="imod_eventDetails">
<h2 class="imod_eventName">[[Event Name]]</h2>
<div class="imod_eventButtons">[[Registration Button]] [[Attendees List Button]]</div>
<div class="imod_eventDescription">[[Event 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 & 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 class="imod_eventActivities">[[Activity List]]</div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>Layout Option #2:
NOTES: This layout looks best with a map embedded in the Location editor. Anything placed in the Location editor will display in the gray window. If using an image in the Event Description editor, do not exceed ~600px wide. 
Code:
<div class="imod_eventDetails imod_eventDetails_layout1">
<div class="imod_eventDetails_layout1--box">
<div class="imod_eventDetails_layout1--dateTimeLoc">
<div class="imod_eventDetails_layout1--dateTime">
<h2 class="ev-heading">Date:</h2>
<span class="date">[[Event Date Only Range DOW]]</span>
<span class="time">[[Event Time Range]]</span>
</div>
<div class="imod_eventDetails_layout1--location">
<h2 class="ev-heading">Location:</h2>
<div class="location">[[Location Name]]</div>
</div>
</div>
<div class="imod_eventDetails_layout1--directions">
<div class="directions">[[Location Directions]]</div>
</div>
<div class="imod_eventDetails_layout1--buttons">
[[Registration Button]] [[Attendees List Button]]
</div>
</div>
<div class="imod_eventDetails_layout1--description">[[Event Description]]</div>
<div class="imod_eventDetails_layout1--contact">
<h2 class="imod_eventLabel">Contact Information</h2>
<div class="imod_eventContactPrimary">
<div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
<div>[[Contact1 Phone]]</div>
<div>[[Contact1 Email]]</div>
</div>
</div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>
Layout Option #3:
NOTES: This layout looks best with a ~500px wide image in the Event Description Editor, centered.
Code:
<div class="imod_eventDetails imod_eventDetails_layout2">
<div class="imod_eventDetails_layout2--mobile">
<div class="imod_eventDetails_layout2--date--mobile">
<span class="date">[[Event Date Only Range DOW]]</span>
<span class="time">[[Event Time Range]]</span>
</div>
<div class="imod_eventDetails_layout2--buttons--mobile">
[[Registration Button]] [[Attendees List Button]]
</div>
</div>
<div class="imod_eventDetails_layout2--leftCol">
<div class="imod_eventDetails_layout2--description">[[Event Description]]</div>
</div>
<div class="imod_eventDetails_layout2--rightCol">
<div class="imod_eventDetails_layout2--buttons">
[[Registration Button]] [[Attendees List Button]]
</div>
<div class="imod_eventDetails_layout2--dateTimeLoc">
<div class="imod_eventDetails_layout2--dateTime">
<h2 class="ev-heading">Date:</h2>
<span class="date">[[Event Date Only Range DOW]]</span>
<span class="time">[[Event Time Range]]</span>
</div>
<div class="imod_eventDetails_layout2--location">
<h2 class="ev-heading">Location:</h2>
<div class="location">[[Location Name]]</div>
<div class="directions">[[Location Directions]]</div>
</div>
<div class="imod_eventDetails_layout2--contact">
<h2 class="ev-heading">Contact Information</h2>
<div class="imod_eventContactPrimary">
<div>[[Contact1 First Name]] [[Contact1 Last Name]]</div>
<div>[[Contact1 Phone]]</div>
<div>[[Contact1 Email]]</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both;" originalstyle="clear: both;"></div>
Layout Option #4:
NOTES: This layout has a color block at the bottom of the right column. The code can be changed by adjusting the RGB code in the HTML. This layout looks best with a ~500px wide image in the Event Description Editor, centered.
Code:
<div class="imod_eventDetails imod_eventDetails_layout3">
<div class="imod_eventDetails_layout3--buttons">[[Registration Button]] [[Attendees List Button]]</div>
<hr>
<div class="imod_eventDetails_layout3--inner">
<aside class="imod_eventDetails_layout3--details" style="border-color: rgb(0, 98, 177);">
<h2 class="sr-only">Event Details</h2>
<ul>
<li>
<h3>Date</h3>
<div class="imod_eventDetails_layout3--detail">[[Event Date Only Range DOW]]</div>
</li>
<li>
<h3>Time</h3>
<div class="imod_eventDetails_layout3--detail">[[Event Time Range]]</div>
</li>
<li>
<h3>location</h3>
<div class="imod_eventDetails_layout3--detail">[[Location Name]]</div>
</li>
<li>
<h3>Questions?</h3>
<div class="imod_eventDetails_layout3--detail">
<span>[[Contact1 First Name]] [[Contact1 Last Name]]</span>
<span>[[Contact1 Phone]]</span>
<span>[[Contact1 Email]]</span>
</div>
</li>
</ul>
</aside>
<div class="imod_eventDetails_layout3--description">[[Event Description]]</div>
<hr>
<div class="imod_eventDetails_layout3--directions">
<h2>Directions</h2>
[[Location Directions]]
</div>
</div>
</div>