Max-width and Google maps

A small but interesting bug that had us stumped at first but once we stopped swearing we figured out max-width and maps don't mix.

On our Agencms site, we plot property results on a Google map and we also use the lovely CSSGrid to provide a dynamic layout. However, one of the simple styles kept breaking Google maps (see screenshot).

Broken maps

Broken Map Controls

It turns out that one of the default CSS rules in the CSSGrid (and many reset / responsive frameworks) is that it sets the CSS rule

img, object, embed { max-width: 100%; }

This is fine except it seems to also impact on the controls if you use embedded maps. As such, you just need to provide a specific override for images within your map holder to cancel the 100% setting. This can be done simply by using:

#map-holder img { max-width: none; }

Hooray! fixed maps

Fixed Map Controls

Hope that helps someone!

Written on Tuesday 13rd of March 2012 by @peteduncanson

Umbraco

We live and breathe Umbraco

We've helped a lots of companies improve their websites and content management tools by creating a range of innovative Umbraco tools and combining that with our love of responsive web design to improve accessibility and conversion rates on a range of targets.

We produce great work

Hillsong Church

Hillsong Church An 18 month project to develop one of the most powerful, extensive Umbraco CMS sites we've worked on.

Cutting Edge Knives

Cutting Edge Knives We didn't just design & build this eCommerce site, we also run the profitable business behind it!

Somewhereto_

Somewhereto_ An extensive Umbraco project to rebuild this popular search and booking portal for young people with Channel 4.

THS Tools

THS Tools We designed and rebuilt the UK's biggest independent tool buying group's site, member management and communication CMS tools using Umbraco.

We share our knowledge

Pete & James both speak regularly about Umbraco, eCommerce and web design and enjoy sharing our experiences with audiences around the UK and abroad.

Upcoming Talks

Pete speaking in Las Vegas at uWestFest 2014 (Photo Credit)

We're available

We value the relationships we've built with our existing clients and look forward to new opportunities so if you have a project you'd like to discuss, the best way to find out what we do and how we can help is to get in touch.

Offroadcode Limited, Office 5, Dale St Mills, Royd Street, Huddersfield, HD3 4QY.

Registered Company Number: 06420788 | VAT No. 927708692