Translation in "Find Events" button is too long

[Greg]

Hi,

Please see attached screenshot. The wording “Find Events” does not fit when the site is in French.

I see the button is a similar size to that on your WPShindig Demo… So I imagine it would not work for you either, if that demo was in French

Simply having “Find” or “Search” would be a better option and much shorter when translated.

Any ideas? Would prefer not to mess about with String Translation, and just have it fixed at root level

Thanks

Greg

[Geoff]

Hi Greg,

I would suggest using CSS to style the button so that it provides more space for the text.

If you have a link to share where I can see the live site, then I’d be happy to see if I can write a little snippet for you to use. Going off my test site, this is what I would suggest adding to your theme’s style.css file or using the Simple Custom CSS plugin:

#tribe-bar-form .tribe-bar-submit input[type=submit] {
font-size: 10px; /* adjust as needed */
}

Will this work for you? Please let me know!

Cheers,
Geoff

[Greg]

Good thinking. Simple. I was overthinking it! I’ll give this a try tomorrow and let you know. thanks for the CSS lines.

[Greg]

Hey Geoff,

OK tried that…

Even at size 10,

TROUVER LES EVENEMENTS

Will not fit unfortunately (any smaller and it’s not readable)

The phrase simply needs to be shorter. Or over 2 lines. Maybe creating a custom page template and inserting a line break in the php code…? I’d need some guidelines if that’s the case.

Link is:

http://cpmr.org/fr/events/

You will need host file edit as site is not live at that domain yet.

91.146.109.70 cpmr.org http://www.cpmr.org
91.146.109.70 crpm.org http://www.crpm.org

Thanks for your help.

[Geoff]

Hi Greg,

I would suggest continuing to tinker with CSS. For example, you can also adjust the widths of the other fields in the bar and increase the button width accordingly to create more breathing room.

Something like this might do the trick, but I’d encourage you to tailor it to suite your needs:

.tribe-bar-date-filter, tribe-bar-geoloc-filter, .tribe-bar-search-filter {
width: 15% !important;
}

.tribe-bar-submit {
width: 45% !important;
}

Here’s a screenshot of how the looks when testing it on my site.

Cheers!
Geoff

[Greg]

Thanks Geoff, I’ve tweaked that to fit.

(Simply having “rechercher” as the text, rather than “trouver les evenements” would solve the problem long term)

Cheers for your help, all the best

Greg

[Geoff]

My pleasure! Happy to help. 🙂

Geoff

[Author]

Posts