Docs

[mittavalley]

Hi the support team,

I have a few issues on the following that need your support:

1.) Resize of map elements
I would like to display map in full width and height at maximum is 440 px on desktop. I checked from the browser the div container is 1170px x 658 px. But this size also should be adjust along with the device too.

2.) Remove border of map

I would like to remove the border of map. Where can I change the css? I couldn’t change the style of .with-container. It worked on browser but not when added the style on customise css.

.with-container {
/* border: 1px solid #ddd; */
/* border: 1px solid rgba(0,0,0,0.15); */
/* padding: 2.5%; */
/* background-color: #fff; */
/* border-radius: 2px; */
/* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
}

3.) Remove border of button after visited

The button have red border around the button box after it was clicked. How can I remove the border around the button?

http://work.mittavalley.com.au/motor-inn/

Thank you.
Regards

[Rue Nel]

Hello There,

Thanks for writing in!

#1] If you want to have a fullwidth map, you will need to change the page template to Blank – No Container | Header, Footer. TO know more about this page templates, please check it here: https://community.theme.co/kb/page-templates/

#2] There is a setting in the Map embed that disables the map container along with its border. If you only want to remove the border, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-map.with-container {
    border: none;
    box-shadow: none;
}

#3] Which button? By the way, you can resolve it by adding the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-btn:focus, .button:focus, [type="submit"]:focus,
.x-btn:visited, .button:visited, [type="submit"]:visited {
  outline: none;
}

Hope this helps. Please let us know how it goes.

[mittavalley]

Hi there,

Thanks for the recommendations. They are good except point 1.)

1.) Resize of map elements
I would like to display map in full width and height at maximum is 440 px on desktop. I checked from the browser the div container is 1170px x 658 px. But this size also should be adjusted along with the device too.

I need only to display map in full width but the rest of the page is already good enough for us. The width of this map would be the same as the footer of the page. Something likes this page. http://www.visitmelbourne.com/regions/Melbourne/Accommodation/Hotels/Crown-Promenade-Melbourne.aspx

Thank for a quick response.

Regards

[Lely]

Hello There,

Currently, page content is restricted by the container. That’s why it will not touch the edge of the browser. To achieve what you want, please use NO CONTAINER page template. Then control the width of the rest of the page content using the container inside the Content band.

Hope this helps.

[mittavalley]

Hi the team,

Thanks for the recommendation. I’ve changed to No Container, Header and Footer template however I didn’t get a display as wishes. The map didn’t display in full. The header dosesn’t show up. Please see the attached images.

I’ve cleared the cache too before reloading the page.

Regards,

[Christopher]

Hi there,

Please disable Column containers option for sections that you want them to display full width.

Hope it helps.

[mittavalley]

Hi the team,

Thanks for the guide. I use Visual Composer so I think you meant to set in Content Band Settings > Inner Container as shown in the attached file. I also refer to this thread https://community.theme.co/forums/topic/full-width-page-layout-not-working/. If I understand correctly, I can’t get the full-width map. Otherwise, you need to send me a screenshot where to disable Column containers.

Regards

[Christopher]

Hi there,

Please uncheck the box ‘Inner container’, also edit mag element and set ‘no_container’ option to true, see http://demo.theme.co/integrity-1/shortcodes/map/

Hope it helps.

[mittavalley]

Hi Christopher,

I’ve changed accordingly, however, there are still white spaces on the left and right. The plan was to get it displayed in full.

It is fine for the moment. But can I change the issue to fix the height of the map please? How to make its height narrower. The maximum height is expecting around 440px. I’ve changed
.x-map.embed.with-container {
max-height: 440px !important;}
but it cut off the map to 440px. It didn’t resize the map’s height. From toggle tools, it seems that there are other containers wrapped in this div which I don’t understand.

Thank you.
Regards

[Christopher]

Hi there,

If you want to adjust map height, please use google map shortcode, see :

Map

e.g :

[google_map no_container="true" lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#54aa81"][/google_map]

Hope it helps.

[mittavalley]

Hi there,

Sorry I missed your reply in my inbox. I’ve tried the suggested shortcode but it didn’t work. This message appears

“Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.”

This is the code I tried on Map Settings, on Text Settings and I also used Google Map elements. Unfortunately, none of these has worked for me. I also cleared the cache and I used Firefox 50.1.0 version.

[google_map lat=”-36.5332387″ lng”147.4927303″ zoom=”17″ zoom_control=”true” drag=”true” height=”45%”][/google_map]

I am not sure what went wrong with me.

Thank you. Regards

[Rad]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[mittavalley]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Google Maps has changed its policy. You will be needing an API key before you can display the map. For best result, please update your google map shortcode like this:

[google_map lat="51.505749" lng="-0.124809" zoom="12" height="200px" hue="#1ca0d8" api_key="your-api-key-here"][/google_map]

And to get the api key, please check out this video:

Hope this helps.

[mittavalley]

Hi Rue,

Sorry for a late reply. Excellent. Thanks for the information.

If we use the Integrity [google map] shortcode, it seems that a user can zoom out but they can’t zoom in. Can we have a box of +/- similar to standard embed with [map] shortcode?

Thank you.
Regards,

[Author]

Posts