Google Map: Box not centered

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!

Comments

  • edited 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?
  • 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!
  • @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; }
  • 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
  • edited 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 :)
  • edited 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.


    Thanks!


Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.