How to add a link to an image and wrap text on the left side

Developer Support CMS Development
1

Hi All,

I added an image to a website page and wanted to wrap the text to the left and also make the image linkable.

However, when I try to make the image linkable the formatting breaks and the text is no longer wrapped to the left . Instead my image shifts to the middle of the paragraph and the looks out of place.

Image with no link added :

1.jpg
1.jpg1065×543 164 KB

Image with link added:

3.jpg
3.jpg1063×824 176 KB

Any help is gretaly appreaciated thanks in advance!

2

Hi there!

If you could send a link to the page, or the page preview if you haven’t updated the changes yet - which you can find here:

351×276 12.5 KB

We should be able to take a look into it for you :slightly_smiling_face:

Stephanie O’Gay Garcia

HubSpot CMS Design & Development

Website | Contact

3

Hi Stephanie,

Thank you for reaching out so quickly.

Here is the link to the page: http://www.aventri.com/strategy/event-venue-sourcing?hs_preview=geQMcNUp-9614971168

Thanks!

4

Great! So I had a look and the issue seems to be that there’s a general “inline-block” display applied to all links (a elements) on your site:

inline-block.jpg
inline-block.jpg1520×610 344 KB

I’d be reluctant to update that as it could affect other parts of your website but, for this particular instance, click on Advanced > Source Code at the top of your Rich Text editor, in the source code (the HTML for your post), find this line for the link around your image:

<a href="https://www.aventri.com/offers/how-to-manage-your-room-block-avoid-attrition" rel=" noopener" target="_blank">

and then add in

style="display: inline;"

just before the closing >, like this:

<a href="https://www.aventri.com/offers/how-to-manage-your-room-block-avoid-attrition" rel=" noopener" target="_blank" style="display: inline;">

I hope that helps!

Stephanie O’Gay Garcia

HubSpot CMS Design & Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

5

Hi Stephanie,

That worked perfectly! Thanks so much for your help.

6

Hi Stephaine,

Hope all is well. I’m having a similar issue where I’ve created an Image CTA and I want the text to be wrapped to the left.

When I try to do that the formatting again breaks and the image is in the middle of the paragraph. Here is the preview link to the page: https://www.aventri.com/strategy/event-app-strategy?hs_preview=FNkmDsUR-8738496244

Since you provided me with a simple fix by using the [style=“display: inline;”] tag I thought there might be another quick fix that I can imput in to the source code?

Thanks in Advacnce!