Title: Responsive Google Map problem
Last modified: April 8, 2018

---

# Responsive Google Map problem

 *  Resolved [Astrix](https://wordpress.org/support/users/astrix/)
 * (@astrix)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/responsive-google-map-problem/)
 * Hello,
 * I spotted an issue with the responsiveness of Google map when in mobile view.
   The left side gets troncated, and is going past the left side of the screen. 
   I tried on you demo website, issue occurs too !
 * See :
 * [https://image.noelshack.com/fichiers/2018/14/7/1523216178-captureerzgz.png](https://image.noelshack.com/fichiers/2018/14/7/1523216178-captureerzgz.png)
 * Any idea ? Thank you !
    -  This topic was modified 8 years, 1 month ago by [Astrix](https://wordpress.org/support/users/astrix/).

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [creativeleif](https://wordpress.org/support/users/creativeleif/)
 * (@creativeleif)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/responsive-google-map-problem/#post-10159485)
 * 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 8 years, 1 month ago by [creativeleif](https://wordpress.org/support/users/creativeleif/).
 *  Thread Starter [Astrix](https://wordpress.org/support/users/astrix/)
 * (@astrix)
 * [8 years, 1 month ago](https://wordpress.org/support/topic/responsive-google-map-problem/#post-10163258)
 * Hello !
 * Thank you, going to try this and will update this thread for any news
    -  This reply was modified 8 years, 1 month ago by [Astrix](https://wordpress.org/support/users/astrix/).

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Responsive Google Map problem’ is closed to new replies.

 * ![](https://ps.w.org/events-manager/assets/icon-256x256.png?rev=1039078)
 * [Events Manager - Calendar, Bookings, Tickets, and more!](https://wordpress.org/plugins/events-manager/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/events-manager/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/events-manager/)
 * [Active Topics](https://wordpress.org/support/plugin/events-manager/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/events-manager/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/events-manager/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [Astrix](https://wordpress.org/support/users/astrix/)
 * Last activity: [8 years, 1 month ago](https://wordpress.org/support/topic/responsive-google-map-problem/#post-10163258)
 * Status: resolved