increase contact form 7 captcha image

[5high-photohub]

Hi there,

What I’d like is to increase the size of the captcha image as it’s a bit small for some to see. I’ve searched all the Kleo css files and can find the css for the contact form 7 but can’t find anything that can help with styling of the actual CAPTCHA image that goes with it.

It’s for the Really Simple Captcha plugin that goes with the contact form 7. The closest thing I’ve found is this:

COPY CODE

.wpcf7 img {
width: 30%;
}

which does increase the image size BUT it also increases the depth of the whole area, meaning there’s now a large gap between the Captcha input text box and the SEND button.

I’ve attached 2 sceenshots to show the increase in space below the text box.

Any ideas?

Many thanks.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, can you share a link to see the captcha? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[5high-photohub]

Hi Laura,

sure, i should have thought of that! It’s here: https://www.the-photohub.co.nz/contact/

Thanks.

[Laura]

Hello, please try this css

COPY CODE

form.wpcf7-form img {
  width: 30%;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="password"] {
  margin-bottom: -9%;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[5high-photohub]

Thanks Laura,

Unfortunately, although it does reduce the excessive gap between the captcha input text box and the send button, it also seriously reduces the gaps at the top of the form so the text now overlaps the input boxes.

I’ve attached a screenshot, but can’t see how to fix this.

Any more thoughts?

Attachments:

You must be logged in to view attached files.

[sharmstr]

try this

COPY CODE

img.wpcf7-form-control {
  width: 30%;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[5high-photohub]

Brilliant! Thanks Sharmstr – it even scales OK too.

Many thanks to all for your excellent help.

[Author]

Posts