Search code examples
htmltwitter-bootstrapimagemap

Responsive <a name> with Bootstrap

I have the following:

<!-- Image map here with links to #anchor1, #anchor2 and #anchor3 -->

<!-- more code -- >

<div class="row">
  <a name="anchor1" />
  <div class="col-xs-12 col-md-4">Anchor 1</div>
  <a name="anchor2" />
  <div class="col-xs-12 col-md-4">Anchor 2</div>
  <a name="anchor3" />
  <div class="col-xs-12 col-md-4">Anchor 3</div>
</div>

When I am using a small resolution device, the boxes are placed one on top of the other. However, the anchors will not scroll down to the newly positioned boxes. It seems to assume that the anchor destiny is the same as if it was on higher resolution devices (in this case, they are on the same row).

Any fix for this?

P.s. I am using the rwdimagemaps to resize the navigation links so that isn't the issue.

Solution

  • At the small size, the divs revert to normal, un-floated blocks. So you have inline elements (links) wrapping block-level elements (divs).

    Setting the links to blocks (maybe even inline-blocks) will probably fix this.

    If inline-block works (and I think it should), you can use this same style regardless of the screen-width:

    a[name^="anchor"]{display:inline-block}

    Otherwise, if it takes block , wrap this is a media-query:

    @media (max-width:768px){
    a[name^="anchor"]{display:block}
}