Full width google maps like in Sydney pro theme


#1

Hi

I would really like to have this full width google maps in my contact page. Just like the one on Sydney Pro theme

I would like to know how I could achieve this effect? if possible.

Cheers
Thanks in advance


#2

Hi,

It is possible with just a bit of custom CSS. You can either use the Contact page template (which you need to first publish, then the option for the map marker will show up). Or you can add your map with a shortcode in a regular page if you’re using a plugin for this. After that simply post a link to that page and I’ll give you the code you need to stretch the map.


#3

K

so I tried using WP Google Maps plugin for this

and got this result, but I guess it is inside some cantainer, since it ignores the full width 100% setting

http://www.tenderbar.dk/vlad/kontakt/

And also I would like to know if there is some plugin or something which allows me, easier, to format the text, cuz right now I can only figure out how to do it with the wordpress text widgets, where I write the html code in there… So just to get 3 columns in the middle with centered text in each, I had to make 5 rows. Damn I cant even describe it properly… You can have a look below the map. Anyways, now I have these ugly devision lines. which I can’t remove because the map widget is inside a row of 1 column and the text widget is inside a row of 5 columns, and they therefore dont go together, thefore there need to be those ugly devision lines.

Im kinda new to this, so I appreciate any advice I can get! =)

Yeah, and thanks for the fast responce!


#4

You can use this in a custom CSS plugin to target that specific row:


#panel-64-0-0-1 {
     max-width: 100%;
     padding-left: 0;
     padding-right: 0;
}

Regarding your second question, you could use just one text widget and wrap each column in a Bootstrap class: <div class="col-md-4"> … </div>


#5

Thanks a lot Vlad! :wink:

It worked,

One thing though, how do I minimize the white space between the map and the text col?


#6

This would do it:


#panel-64-0-0-1 {
     padding-bottom: 0;
}

You also have two empty paragraphs in the maps widget which are taking up space. Let me know if you need it to be closer.