Docs

[mikeand13]

Hi,

Hope you can help,

I have an image that leaps out of its border when the Link is enabled on it.

Screenshot attached.

If I turn the link off it jumps back in its box again.

Is there a way I can make it behave with the link turned on?

Cheers,

Mike

[Nico]

Hi There,

Thanks for writing in.

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, we’ll be happy to provide you with a response once we have a better understanding of the situation.

Please re size the image so you could upload it correctly.

Thanks.

[mikeand13]

Sorry about that I didn’t notice it hadn’t uploaded.

As you can see in the screenshot, the image leaves the picture border when a link is enabled. Disable the link and the image fits the border again!

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Also please let us know which browser/device you are using while experiencing the issue.

Thanks

Joao

[mikeand13]

Hi,

Here is the link to the problematic page.

http://23.91.116.43/~nsipotcadmin/?page_id=12

As you will see the image drops out of its border as it is set currently. But if I remove the link in cornerstone it will pop back in nicely.

Also I noticed the image is centred and looks fine in cornerstone. But on the live page it is off centre.

I am using Safari Version 9.1.1 (11601.6.17) on Mac OS 10.11.5

[Joao]

Hi There,

I Can replicate the issue on my Chrome PC

Would you mind provide your Login Credentials in a private reply so we can take a look on your setup and help you find what is causing the issue?

Thanks

Joao

[mikeand13]

This reply has been marked as private.

[Joao]

Hi There,

Please delete your image that is buggy, duplicate one of the function one, and drag and drop to the first column.

Update your href link after that.

Let us know how it goes.

Joao

[mikeand13]

I deleted the old image duplicated column 1’s image and moved it across.
Replaced the map.

Unfortunately as soon as I click the link button, it jumps out the border again.

Weirdness!

Also tried adding a new smaller map to column one. It slightly jumps out the border when you select the link button.

More weirdness!!

Anything else we can try?

Mike

[Nabeel A]

Hey Mike,

You’re giving max-height: 200px; to anchor tags which is causing the problem. To fix this you can add the following code in your Customizer

a.x-img {
    overflow: hidden !important;
}

Hope this helps!

[mikeand13]

Perfect as always, you guys rock.

Is it bad practice to give a ‘max’ setting when using anchor tags?

Thanks for the help again.

Mike

[Joao]

Hi Mike,

Not necessarily, it all depends on the structure and how it will behave across the devices.

Let us know if you need further help.

Joao

[Author]

Posts