mobile display issue

The plugin is great and does exactly what i need but on certain devices (iphone) the individual event pages don’t display correctly. i am currently using this format on the single event page:

<div style="float:right; margin:0px 0px 15px 15px;"><p style="text-align: left;"><span style="text-decoration: underline; color: #0e52a4;">Date & Time</span><br/>
	Date(s) - #_EVENTDATES<br /><i>#_EVENTTIMES</i>
</p>
<p>
	<p style="text-align: left;"><span style="text-decoration: underline; color: #0e52a4;">Location</span><br/>
	#_LOCATIONADDRESS<br/>
	#_LOCATIONTOWN<br/>
	#_LOCATIONSTATE<br/>
	#_LOCATIONPOSTCODE<br/>
	#_LOCATIONCOUNTRY
</p>#_LOCATIONMAP</div>

<p style="text-align: center;"><span style="text-decoration: underline;"><strong><h3>#_EVENTNAME</h3></strong></span></p>
<p><strong>#_EVENTNOTES</strong><br/>
#_EVENTIMAGE</p>
<p>
</p>
<p>
</p>
<p>
<h4>Further enquiries:</h4>
<p><span style="color: #000000;"><span style="text-decoration: underline;"><span style="color: #0e52a4; text-decoration: underline;">Contact:</span></span> <span style="color: #333333;">Janet Arthur</span></span></p>
<p><span style="text-decoration: underline;"><span style="color: #0e52a4; text-decoration: underline;">Tel:</span></span> <span style="color: #333333;">0116 279 3995</span></p>
<p><span style="text-decoration: underline;"><span style="color: #0e52a4; text-decoration: underline;">Email:</span></span> <span style="color: #333333;">[email protected]</span></p>

It displays perfectly on a desktop but when on a mobile device information that is within the float right section disappears off the visible area of the screen. The left aligned content displays perfectly.

Any ideas how i can alter the CSS to make it more responsive?

Thank you!!

I use BeTheme and this is a link to one of the event pages:
https://highsheriffleic.mystagingwebsite.com/events/evening-reception-at-bosworth-battlefield-centre-in-aid-of-the-new-internet-zone-at-warning-zone/

https://www.ads-software.com/plugins/events-manager/