Design breaks when adding a link

Hi,

I am having a card with tags. In the video you can see the behavior when using it without a link. When I am adding a link the design breaks apart.

1 Like

@RussOggi255 … How did you know how my face looked? :rofl:

1 Like

Must be related to some inheritance. As long as the link is on a button or text it works. But when I use any other wrappers inside that tree it behaves weird.

I’m not at my desk right now, so would have to double check when I’m back, but that looks like you have a link inside a link, which will break the layout.

Good catch … yeah had the Terms & Condition inside. Not sure why that should break in the browser. But yeah does not make sense.

Rearranging fixed it.

1 Like

It’s because the child </a> tag will close out the parent <a>, but then you have an additional </a> in the HTML which will break rendering of your layout.

<a href="https://example.com">
    Click here
    <a href="https://another.com">
        Another link
    </a> <- this is closing the first anchor tag
</a> <- this is now "extra", and therefor breaks the layout in the browser.
1 Like

@Bon,

it makes absolutly sense. I am just astonished that I never stompled over that in the past. But thats maybe because I always coded my html. And with elements because of the drag & drop, I missed the link in the typography in the footer.

Thanks

Short test with chrome. It autofixed the wrong code. Also weird.