Reply To: Google map is broken down into circles?

09/08/2016 at 10:52 am #390263
Steven Zahm
Keymaster

@ 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!