• PHP Help General Help

  • [RESOLVED] anchor tag image link spans 100% across the page on small screen width in bootstrap

Hi guys.

The problem I am having is more of a html/css/bootstrap related issue, rather than a php issue.

As described in the title of this thread, I am having a problem with image links spanning the full width of the screen when viewed in small screen width, in bootstrap.

By this, I don't mean that the actual image is spanning the whole width of the screen. The problem is with the anchor element!

If you visit the link (below) and examine the 3 image icon links directly below the top banner (in small screen mode), you will see what I mean:

http://houseclearancemanchester-co-uk.stackstaging.com/

Ps - I noticed how I have made the same mistake for a few of my past customers. So a solution to this problem would be ever so helpful.

Thanks.
Paul.

    I'm pretty bad at DTRT in design, tend to think of myself as more backend ... but I'll bite ... might give you some thoughts. Keep in mind that probably all of these are NOT the "right way".

    Is the image always going to be the same size? If so, I might assign a corresponding width to the anchor tags.

    For UA's with JavaScript, you could make an onclick event on the image to do navigation.

    Could you make the image a button with the image as background? If so, I think HTML5 might allow buttons to have an HREF or at least you can place a link inside the button ... and that might constrain it.

      If you're referring to those 3 link icons (services, gallery, and contact) being on separate lines on a small screen, that's Bootstrap doing its thing based on the fact that each is in its own "col-sm-2" div. I'm not enough of a Bootstrap guru to know how you would adjust the CSS or such so that those divs are allowed to stay on the same row in a narrow screen, or some other approach. Maybe they can all be put into one (col-*-6 ?) div?

        NogDog;11063395 wrote:

        If you're referring to those 3 link icons (services, gallery, and contact) being on separate lines on a small screen, that's Bootstrap doing its thing based on the fact that each is in its own "col-sm-2" div. I'm not enough of a Bootstrap guru to know how you would adjust the CSS or such so that those divs are allowed to stay on the same row in a narrow screen, or some other approach. Maybe they can all be put into one (col-*-6 ?) div?

        Pretty sure he's referring to the fact that the entire div/col has a link target on it/mouseover shows link, and he'd like to have the link only be on the button/graphic itself.

          Hmm...maybe remove the img-responsive class so that Bootstrap doesn't turn the image into a block element? (Just guessing, not sure what side effects that might have.)

            Write a Reply...