[jabbergirl]

HI there I have the cmap template working pretty nicely

The only thing outstanding is my expanding maps in the entries.
Instead of expanding over the other entries they expand UNDER the entries

I am using some custom css I found here to create columns and added some css for the google map – added to Theme custom css page – but its not working…?

<h1>cn-cmap div.cn-list-section-head {</h1>

display:none !important;

}

.gm-style img {
z-index:1000;
}

<h1>cn-cmap div.cn-list-row,</h1>

<h1>cn-cmap div.cn-list-row-alternate {</h1>

float: left;
margin-right: 10px;

margin-bottom: 25px;
height: 240px;
width: 23rem;
}

<h1>cn-cmap div#cn-list-foot {</h1>

clear:both;

}

I amhoping it s something really simple I have missed?

[jabbergirl]

Sorry the code I submitted got corrupted by the editor – this might be easier to read

#cn-cmap div.cn-list-section-head {
    display:none !important;
}

.gm-style img {
z-index:1000;
}


#cn-cmap div.cn-list-row,
#cn-cmap div.cn-list-row-alternate {
    float: left;
    margin-right: 10px;
margin-bottom: 25px;
    height: 240px;
    width: 23rem;
}
#cn-cmap div#cn-list-foot {
    clear:both;
}

[Steven Zahm]

@ jabbergirl

The issue is not likely the z-index but rather the float and the height that is being applied to the containing div. Perhaps something like this would work better:

#cn-cmap div.cn-list-section-head {
    display:none !important;
}

#cn-cmap div.cn-list-row,
#cn-cmap div.cn-list-row-alternate {
    display:inline-block;
    margin-right: 10px;
    margin-bottom: 25px;
    min-height: 400px;
    width: 48%;
    vertical-align: top;
}

#cn-cmap div#cn-list-foot {
    clear:both;
}

[Jabbergirl]

HI there thanks for that Steve – it fixes the problem of the maps underneath the info – but when the width is set at 48% it looks bad on mobile – the boxes are squashed up on the left hand side – not centered. If I increase the percentage I lose the columns. I had wanted them for the viewer so it’s easier to read the information.

I know you said cmap doesn’t really support columns – has there been any work around that solved this effectively as far as you know?

[Steven Zahm]

@ jabbergirl

re: HI there thanks for that Steve – it fixes the problem of the maps underneath the info – but when the width is set at 48% it looks bad on mobile – the boxes are squashed up on the left hand side – not centered. If I increase the percentage I lose the columns.

My suggestion would be to create media query CSS selectors and change the width to 100% and display as a block on smaller screened devices.

re: I know you said cmap doesn’t really support columns – has there been any work around that solved this effectively as far as you know?

No, not really. The best solution I’ve seen was when the sliding content trays (bio/map/notes) were disabled in the card list view. This info is still available on the entry profile/detail view. Then using a float with a percentage width works fine. This is the reason (the sliding content trays) that cMap does not support and will not support it. There are other templates such as Tile Plus, Gridder and Circled which does support a columnar layout. Tile Plus is undergoing a major rewrite at the moment which will bring its configuarbility to be as flexble as cMap.

Hope that helps.

[Jabbergirl]

Thanks very much

[Author]

Posts