Olá! Nós temos uma Comunidade em Português!

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

resolver
Principal conselheiro

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
Responder
0 Avaliação positiva
1 Solução aceita

Soluções aceitas
Highlighted
Autoridade no assunto

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!

 

5 Respostas 5
Autoridade no assunto

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 Smiley feliz

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

Responder
0 Avaliação positiva
Principal conselheiro

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! 

Responder
0 Avaliação positiva
Highlighted
Autoridade no assunto

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!

 

Principal conselheiro

Hi Stephanie, 

 

That worked perfectly! Thanks so much for your help. 

Responder
0 Avaliação positiva
Principal conselheiro

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! 

Responder
0 Avaliação positiva