Stretched-link problem

I have serious problems with .stretched-link; always worked fine, but after using it on a second page (I copied from one page to another) and after changing all links, all is wrong!
Deleted stretched-link from the Class manager, defined .stretched-link to an icon within a column, it works fine. But after defining the second or the third link, its a mesh. Without the .stretched-link als links work fine, but of course only on the icon.
Is there maybe some kind of cache? What goed wrong?
Thanks for helping me out!

Can you give some illustration of the structure you are using.

here it is:
CleanShot 2022-06-28 at 13.32.28@2x

resulting in: (for testing)

I’m no master with stretched-link, so it’s quite possible I could be wrong, but here goes!

Stretched-link would normally be used when everything in a container was a link to the same destination (ie: if you had a picture, copy buttons etc. and you wanted them all to point to the same outcome), it seems as though you are using them on separate items, which should work just as normal links and ignore the stretched-link addition.

1 Like

thanks, but that’s what I did: and yet it goes to the wrong page! The two columns at the right and at the left go to the same (wrong) page, but have of course different links.

You would need to set/add .position-relative to each component to prevent the link from stretching outside the parent element.

It’s all in the Bootstrap docs.

1 Like

As @Jerry said. Some items have position relative as default which is why it works easily in cards etc. parents that don’t have position relative will need it assigned.

Can someone please explain to me why stretched-link is being used in these circumstances rather than a normal link?
I’m missing something……

If you want the link to extend beyond itself to the parent. In this case the surrounding DIV becomes clickable.

Hi @PeteSharp, yes, I get that, but I’m just wondering why the stretched-link in this scenario.
You have a Blog icon which presumably leads to the blog page, a Forum icon which presumably leads to a forum page etc. so just having trouble thinking why a normal link couldn’t be used.

This is where my mental limitations kick in!!

1 Like

I get that, and I can only answer who knows :joy: I’ve seen a lot of interesting things over the years :rofl::rofl:

2 Likes

I’ve added this class to the DIV of the Carousel, but it does not work. What am I doing wrong?

But where’s the link to stretch? :thinking:

Maybe I didn’t explain this very good. This is a Carousel. How can I use Stretch-Link in a way that when the image area is clicked on it open the target?
I have added this class to each one of the elements and nothing works.

I want both the text and the icon clickable to go to the Blog. Function together as a buton

1 Like

Used this setup for a year without .position-relative! Only after (I guess) copying it was a mess.
Same setup as in Winter Site Template for Blocs 5 - Blocs Templates > Features. Define the stretched-link and it works…
Really don’t know why it isn’t functioning amymore.

Switched to a Card instead of a Column: works fine

Thanks all!