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 13th of March 2012 by @peteduncanson


We're an Umbraco Gold Partner

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.

Find out why we love Umbraco so much

We produce great work

Read our case studies to find out more about how we design and develop Umbraco powered sites.

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!

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've also worked with these other great companies

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.

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

Work with us

We love hearing about new challenges so if you have a project you'd like to discuss, the best way to get it started is to get in touch.

Call us +44 (0)1484 643 078


Send us an e-mail

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

Registered Company Number: 06420788 | VAT No. 927708692