[Solved] Responsive images with anchor links

[Jamie]

Problem with responsive images. I am working on a responsive site that is using the skeleton framework. everything is fine. My problem is that I have a slider on the site and the image and text are working fine but when I surround the image in an anchor link, they stop responding to the responsive settings. I found if I remove the links, then things work.

The slider is working in WordPress. Here is the code that generates the link and image

echo '<a href="' . $slide['link'] . '"><img src="' . $slide['image'] . '" alt="' . $slide['title'] . '" /></a>';

removing the link fixes the problem. How do I make the image responsive when the link is present?

[Paulie_D]

We’re not going to be able to diagnose anything from a short piece of code like that.

A link to the live site would be of more use.

I suspect, however, that this is more of a JS issue than plain old CSS but we’ll see.

[Jamie]

Check the slider on the homepage

http://www.themebuddies.com/WordPress/reedsandkeys/

[Senff]

I don’t know where it comes from exactly (it’s in settings.css so perhaps it’s something you’ve added yourself), but maybe this could be the issue:

.tp-simpleresponsive img {
    max-width: none;

If that’s set to 100%, maybe things work better.

[Jamie]

how would that affect the links though? It only doesn’t work when links are present. Otherwise it’s fine

[TheDutchCoder]

It’s because your link is an inline element.

If you add

.tp-simpleresponsive a {
  display: block;
}

They’ll work fine ;)

Also, the captions in the slide are not inside the anchor, but on top of it.
You want those to be inside the anchor as well, in order to do that, you’d probably need to make them span elements instead of div.

let us know if this helps!

[Jamie]

no. I tried it but got no improvement.

[TheDutchCoder]

It works fine for me if I set your links to display: block and the images to width: 100%;

[Jamie]

yea, It seems to have worked once I added the width: 100% to the images. Maybe it worked before but just didn’t update correctly..

Thank you.

[TheDutchCoder]

No problem, glad it worked out for you!

[Author]

Posts