[minneapolisriverfrontParticipant]

I’m working in Visual Composer, using the “Blank – No Container | Header, No footer” template for the Integrity Light theme in X 3.1.1. I’m using your child theme, but the only customizations I’ve done deal with typeface, and are in WordPress’ built-in style.css editor.

I’ve been trying to get a custom map added using the “Map” visual composer element that would have something other than the default proportions – a Google Map iframe with a 1:2 x:y ratio. Ideally, that map element would fit in the left-most of an equal three-column setup. Beyond that, I’m not terribly picky – it could be responsive, or if needed it could be a static size. I’ve tried any number of things mentioned in the forums with CSS, and am obviously missing something important.

Ideally this would be done in visual composer, but I’ll welcome the fix any way it makes sense…

Thanks in advance for your help!
Bob

[minneapolisriverfrontParticipant]

[Ignore this reply.]

[DarshanaModerator]

Hi there,

Were you able to resolve your issue? If not, could you please provide us with a URL to the page that you’re you need to adjust.

Thanks!

[minneapolisriverfrontParticipant]

I’m open to doing this in a number of ways, but what I’d really like is for the map on the following page, which I inserted using the “map” element in Visual Composer, to fill out the column width in this layout, whether I use a 1/3 width column or a 1/2 width column, with a 1:2 width:height ratio in the map.

http://testserver.minneapolisriverfrontpartnership.org/?page_id=627

[ZeshanMember]

Hi Bob,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[minneapolisriverfrontParticipant]

Okay, take a look at the sample I mocked up at http://testserver.minneapolisriverfrontpartnership.org/map_sample.html

I would like something similar to this, with a couple footnotes/additions:
(1) Body text would go to the left of the map.
(2) A site-wide header across the top.
(3) I would like it to be fully responsive, in the way the X theme generally is. In other words, when I shrink the window down past a certain size, the map would shift to be below any text I put to the left of the map, rather than simply getting proportionally smaller.

[Nabeel AModerator]

Hi Bob,

Switch to text-editor and paste the following code:

[vc_row][vc_column width="1/2"][custom_headline type="left" level="h1" looks_like="h1"]This is custom Headline[/custom_headline][vc_row_inner][vc_column_inner width="1/1"][text_output]Simple Text[/text_output][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width="1/2"][google_map zoom_control="true" no_container="true" lat="74.11" lng="73.24" zoom="3" height="450px"][/google_map][/vc_column][/vc_row]

You can then switch back to VC mode to edit as per your requirement. Let us know how this goes!

[minneapolisriverfrontParticipant]

Thanks for your ongoing help!

Your code gets me part of the way to what I need, with one very key exception. I want to embed a more complex Google map than the “Google Map” element allows. Mainly, I have a number of sets of custom datasets that I want to display each on a Google map, each on their own webpage. And I’d still like the ability to make those maps 700px high – because the geography for those data sets is vertical, not horizontal.

So, when I go to insert that kind of map using the plain old “Map” element in Visual Composer, pasting in a custom Google Map iframe code as the directions specify, it seems I’m stuck with a map that’s 450px high. So, what it seems I’d really like is a webpage like the one I created below using Visual composer, except using the “Map” element, not the “Google Map” element, so that I can use my custom maps.

http://testserver.minneapolisriverfrontpartnership.org/?page_id=656

[DarshanaModerator]

Hi there,

Please try adding the following CSS code into your Customizer, Custom > CSS section.

#x-google-map-inner-1 {
    height: 750px;
}

Hope that helps.

[minneapolisriverfrontParticipant]

I tried that and it did not work – I believe that is because “x-google-map-inner-1” wasn’t a div ID in the page I wanted to modify, because I’m using the “map” element, and NOT the “Google map” element in visual composer.

So I think you misunderstand me. For clarity (not out of frustration), let me try to make my request as clear and simple as possible: I need a CSS class or id selector to make the map on this page 700px tall:
http://testserver.minneapolisriverfrontpartnership.org/?page_id=627

If that’s not possible, please let me know, or suggest an alternative.

Thanks!
Bob

[Nabeel AModerator]

Hey Bob,

I checked your page and your map is 750px in height. Did you clear your browser cache after adding the code? Please clear it once and check the page again.

Let us know about it.

[minneapolisriverfrontParticipant]

Just to be certain we’re on the same page, the page in question is http://testserver.minneapolisriverfrontpartnership.org/?page_id=627

The map shows in source as seemingly 750px in height, but it doesn’t render on screen that way. I did clear my Chrome cache via the Settings menu, and also used several browsers I’d not used to see this site (IE, Firefox, Firefox Dev Ed on Windows 7, Safari on iPhone), SHIFT-Reloading each, and all rendered it as 450px.

I need a solution – ideally a CSS class or id selector to make the map on that page 700px tall.

[ChristianModerator]

Hey there,

Please add the code below to your Appearance > Customize > Custom > CSS.

.x-map .x-map-inner {
height: 750px;
}

Hope that helps. 🙂

[minneapolisriverfrontParticipant]

It works!! Thank you, that’s what I was missing!

Thanks again,
Bob

[Nabeel AModerator]

Glad we were able to help.

Cheers!

[Author]

Posts