Text goes outside the Box

That is definitely a weird one. It is most likely a CSS issue, can you pass along your URL so that I can have a look?

Thanks so much for using my plugin! We will get you sorted out!

Thank you for such a quick response.

Here is the URL – goo.gl/OQ8qbP

Well, I need a url of a post or page with an offending click to tweet box. you can make a page that doesn’t appear in your navigation with a busted box on it, and I can go from there.

Here is the url – https://www.touchngoid.com/fingerprint-templates-storage/

Here’s what’s going on: your theme CSS has a command for all links to not wrap. That looks like this:

.entry-content a {
    white-space: nowrap;
}

To fix it, you can edit the CSS in your theme file, removing that declaration, or you can add a bit to the CSS file in my plugin (located at wp-content/plugins/better-click-to-tweet/assets/css/styles.css) declaring

.bctt-ctt-text a {
    white-space: normal;
}

The best way for you to do this would be to follow the customization guide at https://benlikes.us/bcttcustom so that the additional CSS is not overwritten by plugin updates. THe short version of that would be to copy the bcttstyle.css from wp-content/plugins/better-click-to-tweet/assets/css/ into the root of your uploads folder at wp-content/uploads, and be sure to add the white-space: normal; declaration above.

If you don’t know how to do that, let me know, and I can try and walk you through it.

Thanks for using my plugin! I’m going to mark this issue as resolved, but don’t hesitate to reach out if you need more help.

Hi,

Thank you for looking into the issue and suggesting the fix. I tried to follow the steps but since I am not a developer I am sure I did not follow them correctly as it did not work for me. Would you be able to help me with the same?

I edited the bcttstyle.css files and moved it to wp-content/uploads folder.

I am sorry about the trouble.

Thanks a lot.

No trouble at all.

In that file in the /uploads folder, try add an !important declaration to that line you added:

.bctt-ctt-text a {
    white-space: normal !important;
}

That’s a hacky way to force the browser to listen to that directive. The other way would be to modify the theme files. Let’s try the important declaration first, to see if it works.

Thanks Ben,

I have made the changes to the file

I added a bcct here – https://www.touchngoid.com/fingerprint-templates-storage/

Not, it shows 99 characters (instead of 117). The formatting of the box has changed.

Thanks

My plugin dynamically changes the number of characters allowed based on whether or not you include “via @bayometric” in the tweet. So, the resulting tweet when you click to tweet on the box in that post is exactly 139 characters long total, including the link back to the post and your username.

If you want the full 117 characters, be sure to uncheck the box to “add via” on the short code generator, or add an additional parameter of via="no" to the shortcode.

Glad you got the formatting issue taken care of. Thanks again for using my plugin.

Thanks.

The issue is that before I did the change the Click to tweet box looked like this – https://pho.to/9cj3P

Not it looks like this -https://pho.to/9d7ke

So the box formatting has changed somehow.

Thanks

Right, that’s because you are loading a new CSS file (with a custom style!), the one that you copied from my plugins folder to the root of the upload folder. If you want it to look exactly like the standard box, simply copy the styles.css file, and rename it bcttstyle.css (adding the !important declaration from above.)

Does that make sense?

Thank you so much for your support. This works!