[Carolin Collins]

Hi Steven!

I just noticed that our Google maps are broken down into circles? Have never seen this before and am wondering if you might have any idea what is causing this?

See for example: http://www.cainterimmanagers.ie/new/membership/members/member-directory/name/paul-quinn/

Thanks!

[Steven Zahm]

@ Carolin

re: Have never seen this before and am wondering if you might have any idea what is causing this?

I’ve never seen sometime like this specifically, but I do, or use to, see all sorts of other little oddities because themes and plugins aggressively style images. I suspect that is what is happening here. Let me take a look…

Ok, I found two custom styles being applied to images… I’m guessing you added them?

They are:

#cn-cmap span.cn-image-style,
#cn-list img {
    border-radius: 150px !important;
}

#cn-cmap span.cn-image-style,
#cn-list img {
    border-radius: 150px !important;
}

Obviously these are the same statement, but they appear to be entered in two different locations because one is loaded as an theme custom inline style and the other is loaded in the theme’s custom.css file.

The style itself is fine but the #cn-list img selector is the problem. It is applying that style to every img within the Connections list, even the Google Maps image. You should change the selector to #cn-cmap span.cn-image-style img.cn-image so the CSS statement looks like this:

#cn-cmap span.cn-image-style,
#cn-cmap span.cn-image-style img.cn-image {
    border-radius: 150px !important;
}

Selecting this way ensures that you only select the photo image within the template and no others.

Hope that helps!

[Carolin Collins]

Thanks so much for your super-quick reply! Never thought of a Google Map being made up of a series of images like that and being influences by a style in that way. Cheers!

[Author]

Posts