Title: Address info location Last modified: April 29, 2020 --- # Address info location * Resolved [stuart20](https://wordpress.org/support/users/stuart20/) * (@stuart20) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/) * Hello 🙂 * Great plugin. * I see from the screenshots for this plugin, the address info (Address, city, country etc) is next to the google map (to the right) – mine remains underneath the map. How can I moved to the right as per the screenshots linked to this plugin?( do I need some separate CSS code?) * Also, the search icon on the map (top right corner) overlaps with the ‘map fullscreen’ button and when clicking on the search icon, the search box that comes up is sort of overlayed infront of the map and not clear or good looking. Is this how the plugin is or is it just displaying incorrectly for me? * Thanks Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Author [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/) * (@aurovrata) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12757534) * > How can I moved to the right as per the screenshots linked to this plugin? ( > do I need some separate CSS code?) * there are 2 ways to achieve this, * – use custom address fields (see FAQ #5 along with the [Smart grid-layout plugin](https://wordpress.org/plugins/cf7-grid-layout/) to place your fields in a grid layout using the UI editor provided in that plugin. This is the most flexible solution. * – alternatively, display inline and float the google map element left and display inline the address field container using CSS styling. * Thread Starter [stuart20](https://wordpress.org/support/users/stuart20/) * (@stuart20) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12759927) * Thank you for the reply. * > – alternatively, display inline and float the google map element left and > display inline the address field container using CSS styling * In order to display inline and float with CSS, I assume the map and address need to be assigned to ids/classes. Using the inbuilt contact form 7 generated code: * `[map map-911 id:my_id_tag show_address "zoom:3;clat:0;clng:79.810600;lat:12.007089; lng:79.810600"]` * With the above code, the address bar does not display. The code seems to crash when it gets to `id:my_id_tag`. I’ve also tried assigning ‘map-911’ and/or ‘show address’ to ids/classes using normal html (id=”map-911″), but does not work either. * We changed the above piece of code to the below, which then displays the show_address properly, but we cannot seem to get the ‘id:my_id_tag’ to work with our CSS code. `[ map map-911 show_address id:my_id_tag "zoom:3;clat:0;clng:79.810600;lat:12.007089; lng:79.810600"]` * Our final code looked as follow, but did not change anything on the display: * **Code in the contact form** `[map map-911 show_address id:my_id_tag "zoom:3; clat:0;clng:79.810600;lat:12.007089;lng:79.810600"]` * **Code in the CSS editor** * ``` #my_id_tag { display: inline; float: left; } ``` * Plugin Author [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/) * (@aurovrata) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12772346) * > I assume the map and address need to be assigned to ids/classes * cf7 plugin assigns unique classes to field wrappers, * ``` .wpcf7-form-control-wrap. ``` * so you don’t need an IDs as each field has a unique name and that is used to construct the class. * Plugin Author [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/) * (@aurovrata) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12772349) * > Great plugin. * thanks, do leave a review when you have 2 minutes of spare. * Thread Starter [stuart20](https://wordpress.org/support/users/stuart20/) * (@stuart20) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12777486) * > thanks, do leave a review when you have 2 minutes of spare. * Done 🙂 * Thread Starter [stuart20](https://wordpress.org/support/users/stuart20/) * (@stuart20) * [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12777524) * > cf7 plugin assigns unique classes to field wrappers, > .wpcf7-form-control-wrap. > so you don’t need an IDs as each > field has a unique name and that is used to construct the class. * Okay, so what is the field name for just the address section? * With the following CSS code, I can make the map and address smaller and float left, but it applies changes to both the map and the address section. How do I call just the address section and just the map section within the field ‘my_map’? * **CSS** * ``` .wpcf7-form-control-wrap.my_map{ display: inline; width: 45%; float: left; } ``` * **HTML/ CF7** [map* my_map show_address “zoom:4;clat:-38.366664084361826;clng: 35.73023504724712;lat:-35.786595063131884;lng:38.280644136047357”] Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Address info location’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/cf7-google-map.svg) * [Contact Form 7 extension for Google Map fields](https://wordpress.org/plugins/cf7-google-map/) * [Frequently Asked Questions](https://wordpress.org/plugins/cf7-google-map/#faq) * [Support Threads](https://wordpress.org/support/plugin/cf7-google-map/) * [Active Topics](https://wordpress.org/support/plugin/cf7-google-map/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-google-map/unresolved/) * [Reviews](https://wordpress.org/support/plugin/cf7-google-map/reviews/) * 6 replies * 2 participants * Last reply from: [stuart20](https://wordpress.org/support/users/stuart20/) * Last activity: [6 years, 4 months ago](https://wordpress.org/support/topic/address-info-location/#post-12777524) * Status: resolved