I can't seem to figure out how to target the block that my OpenLayers map sits in. I've switched from a Gmap to an OpenLayers implementation, so I already know which styles I want to apply to the Map block itself, but when I mess with the styles in chromes dev tools I get strange results such that my points and map controls get moved, but not the map container itself width off

So applying the styling to the map block directly in dev tools result in the base-layer being pushed off and inaccurate. It looks like the map block and div id's get generated by the javascript in openlayers on each page load, so I'm not sure exactly how or where to apply my CSS. I get similar results when I target the map container div as well.

This the css I was applying to the Gmap

#block-views-phi-rho-chapter-map-block-1 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
@media all and (min-width: 720px) {
  #block-views-phi-rho-chapter-map-block-1 {
    width: 85%;
    .view-phi-rho-chapter-map {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 10px solid #dbdbdb;

1 Answer 1


ok, so the answer should have been more obvious to me but I'm not really a front-end guy so it took a little head scratching to see that I just had to target the block by class rather than id...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.