Div Changed To Anchor When Selecting A Link Messing Up Design

Hi there,

I’m not sure if this has always been the case, but when I select a div and set a link, it is converted to an anchor. With this it loses some settings? Depending on the following design, the layout shifts / messed up.

grafik

Am toggeling the link of the div here:

My Gif XD (14)

Could provide the blocks as component if one would like to take a look :face_with_peeking_eye:

Cheers

Confirming we have also noticed some instances of this, haven’t had time to report them yet.

1 Like

Hi @T-low,

I think what you are describing isn’t a Cwicly specific behaviour with links, but an expected one.

To clarify, <a> tags are inline elements.

Inline elements flow within the text, which means they won’t take up the full width or height of a container.
This can cause issues with spacing and layout, making it seem like the element is distorted.

To avoid this, be sure to set your linked element (div in your case) to display: block; which makes it a block-level element, thus taking up the full width of its container.

Please don’t hesitate to let me know if you have any more questions on this.

1 Like

Hi @Araminta,

thank you very much for the help and the detailed description.

Setting the div to display as a block works perfectly on my end. :+1:

Cheers

1 Like

@Araminta, if I understand correctly, the issue is not that <a> tags are being created, it is that they are replacing the element (as opposed to wrapping the element or its contents).

Hi,

When you set an element to link the tag is automatically changed. It doesn’t replace any element.

Best regards,
Johnny

That is what I mean by replacing. If it is a <div> and you set it to a link, it changes to an <a>. Thereby the tag is replaced as opposed to the <div> or its contents being wrapped by an <a>.

Hi,

You are adding a link to the block you have selected. You can wrap it if you want an extra dom element.

Best regards,
Johnny