I eventually managed to fix this by increasing the size of the image in my theme’s style.css by 110% for both height and width for the captcha image. However this meant changing the CSS site wide so hopefully there is a more reliable way to fix this.
RE: a more reliable way to fix this
You could target the CSS so it only affects HTML elements within CF7 forms.
.wpcf7 img {
/* add code here */
}
See Styling Contact Form for a general explanation of styling CF7 forms using CSS.
There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.
Thanks Buzztone, unfortunately your CSS didn’t work as a standalone. I am working a tricky but very versatile framework. What did work though (and you got me on track) was to use the theme’s CSS with the cf7 element:
‘
.row .col .wpcf7 img {
height:110%;
width: 110%;
}
‘
Thanks. Great to hear from you. Awesome response.
I typically don’t supply “standalone” solutions in my comments – always better to give someone a fishing rod rather than a fish IMHO. Glad you found the solution in your particular case.
If this resolves your question, it helps others contributing here, if you can flag your post as [resolved]
I’ve had some friends with visual limitations test this and increasing the image size slightly has greatly helped. The slight size increase has also made the captcha readable on mobiles so great result. Thanks to Buzztone for your ‘fishing rod.’
