Text is cut off

Thanks @michelle1107! I see the text being cut off as you describe. Draw Attention attempts to keep the text/labels within the borders of the image. This is so it works well on different devices and WP themes. In some themes, it can lead to weird behavior with mouse events if the tooltips aren’t visually contained within the borders of our Draw Attention image.

So there are a few approaches I’d take with this issue if it were my site:
1. Upload a larger version of the image, with some more horizontal padding around the edges. It could be a transparent background or the matching background color, but just adding 100px to the left and right would make sure there’s space for the tooltip to fit. This would require repositioning the clickable areas. (They’ll still be there after you add replace the image, but they’ll need to be moved/updated)

2. Write some custom CSS to make the text in that tooltip a slightly smaller size.

3. Try to remove a couple characters in the text, like “Follow on Instagram” or “Find us on Instagram”. This may not be ideal, but is a very quick fix.

Hope that helps!

Thanks,
Nathan

Hi Nathan!
Thank you for your quick response. I tried option 1 and that did not rectify the issue.
I think option 2 would be perfect, but I’m not comfortable with writing .css .
Option 3 could work too, I may end up going that route.
Have a great day, M.

Hello @michelle1107,

We have an article here: https://wpdrawattention.com/document/customizing-draw-attention-css/

that describes how to add custom CSS to your site. I think you could start by trying this CSS:

body .leaflet-container { overflow: visible; }

Which should stop the text from getting cut off when it’s bigger than your image.

Let us know if you need any further help with this.

–Natalie

Hello Natalie!

I tried option 3 first and shortening the from “Like us on…” to simply “Like us” worked.

Thank you so much for providing the .css to work with option 2!!! I copied and pasted it the text and it works perfectly.

Option 2 is the clear winner.

You and Nathan rock! I have many favorite elements on my home page, by this one by far is the most unique.

Cheers, Michelle

Hello @michelle1107!

Great, I’m glad it’s working for you. Just let us know if you need anything else.

If you have a minute to leave us a review, we’d appreciate it! https://www.ads-software.com/support/plugin/draw-attention/reviews/#new-post

It helps people find our plugin and gives them the confidence to give it a try.

Thanks!

–Natalie

Done! Thank you again for your assistance.