Responsive Google Map problem

I had the same problem. I added CSS in the ‘Formatting’ page. Not sure if this is the best idea but this is what I added:

<style scoped>
/* 0 to 299 */
    .left-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        float: left;
    }
    .right-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        float: left;
    }
/* 650 to 919 */
@media (min-width: 650px) { 
    .left-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 50%;
        float: left;
    }
    .right-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 50%;
        float: left;
    }
}
/* 920 to X */
@media (min-width: 920px) { 
    .left-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 25%;
        float: left;
    }
    .right-col {   
        display: flex;
        flex-direction: column;
        position: relative;
        width: 75%;
        float: left;
    }
}
</style>
<span class="on-the-fly-behavior"></span>

<div style="max-width: 1920px !important">
<div style="display: inline-block; flex-wrap: wrap; width:100%;">

<div class="left-col">
<div style="padding:15px 15px 15px 15px; background-color: #f2f4f5; margin-left: 10px;  margin-right: 10px;">
<p>
	<strong>Date/Time</strong><br/>
	#_EVENTDATES<br /><i>#_EVENTTIMES</i>
</p>

<p>
	<strong>Price</strong><br/>
	#_EVENTPRICERANGE
</p>

<p>
	<strong>Activity</strong><br/>
<a href="#_CATEGORYURL">
<img style="vertical-align: middle;" alt="#_CATEGORYNAME" src=#_CATEGORYIMAGE{25,25}
</a>
<span>  #_CATEGORYLINK</span>
</p>

{has_location}
<p>
	<strong>Location</strong><br/>
	#_LOCATIONLINK
</p>
{/has_location}

</div>
</div>

<div class="right-col">
<div style="padding:15px 15px 15px 15px; background-color: #f2f4f5;  margin-left: 10px;  margin-right: 10px; min-height: 325px;">
#_LOCATIONMAP
</div>
</div>

</div>
</div>

<br style="clear:both" />
<div style="margin-left:10px; margin-right:10px;">
#_EVENTNOTES
</div>

{has_bookings}
<h3>Bookings</h3>
#_BOOKINGFORM
{/has_bookings}

<br/>
#_EVENTTAGS

• This reply was modified 6 years, 11 months ago by creativeleif.

Hello !

Thank you, going to try this and will update this thread for any news

• This reply was modified 6 years, 11 months ago by Astrix.