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

SOLVE
Occasional Contributor

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.png

 

Image with link added: 

3.png

 

Any help is gretaly appreaciated thanks in advance!

CSS
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Regular Advisor

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

 

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!

 

View solution in original post

5 Replies 5
Regular Advisor

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: 

 

page-preview.jpg

 

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

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

Reply
0 Upvotes
Occasional Contributor

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! 

Reply
0 Upvotes
Solution
Regular Advisor

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

 

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!

 

View solution in original post

Occasional Contributor

Hi Stephanie, 

 

That worked perfectly! Thanks so much for your help. 

Reply
0 Upvotes
Occasional Contributor

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! 

Reply
0 Upvotes