Google Map: Box not centered

Prash · August 2014

Hi guys, thank you for your hard work!
I've got a problem with the Google Map: I put the right coordinates, then the map shows the red pin at the center (which is right) but the box is shown on the right hand side of the map (which is not right).

How can I fix this?

Also, is there any option to show the map in full-width?

Link

thank you very much!

Soweic · August 2014

+1 Yes, that's what I've been longed for too. It's confusing to display that box with arrow down on a different location like that. Hope Be will be able to tickle this issue.

Anyway, to get the map to display in full width like mine here: http://soweic.com/contact-us/

Choose Layout > Full width.No sidebar for that section in Muffin. And also if you don't want a white gap between the subheader and the map, use this css:

/* Style the Contact Page */

.page-id-28 #Content { padding-top: 0 !important; }

Please, change the 28 to your map page id which in your case is 18.

I love how you can display your logo outside the navigation bar like that, do you mind sharing your tip?

Prash · August 2014

Hi Soweic, thanks for sharing your suggestion, as you can see here: http://pbrd.co/1vC0D4Z I tried to make it full-width but it's still the same!

About the logo, I can't perfectly remember, but for sure you need to:

upload a bigger logo,
set position as absolute and use an high z-index (so it doesnt go under my slider in the home, not sure you need it),
play with margins and padding

then I added a white border to better match the nav bar.

Remember that this will affect how the logo appears on mobile, so you'll need to play with some @media queries with a min-width of 768px

Hope you know what I'm talking about, I don't have so much time to explain better, sorry!

Albert · August 2014

@Prash We understand what you mean but this can`t be done. Red point shows the location on map but the box on the right side just have necessary informations like address, phone or email. This box is not showing the position on map. If you don`t want to be confused with this little arrow in left top corner on get in touch item, then you can remove it using below css and after that you will have just regular box with address:

.column_map .google-map-contact-wrapper .get_in_touch:after { display: none; }

Prash · August 2014

Oh I see, thanks for explaining. You'll agree with me that that arrow doesnt make too much sense then

And what about the full width?

Thank you

Soweic · August 2014

Prash, that http://pbrd.co/1vC0D4Z is just for sidebar option. You will need to set it in Mufifin builder section: https://www.diigo.com/item/image/6wmx/5c3j

muffingroup, can help me more

Prash · August 2014

Thanks mate, anyway the option is "Style" not "Layout"

Layout was already on full-width, but if you need to stretch the content from side to side you need to choose Full Width in the Style dropdown.

http://pbrd.co/1sUsWbx

Thanks!

Google Map: Box not centered

Comments