[Support request] Non responsive form

[troyw]

Hey team,

I’m not sure why, but one particular contact form I have created for my website, will respond to my responsive CSS.

@media (max-width: 768px) {
    .wpcf7-file {
		display: none;
    }
}

As you can see, this is pretty standard CSS, but when used it makes a complete mess of the Responsive version of the form, especially the File Upload boxes. Also I’m using Contact Form 7 which again, is pretty standard stuff.

If I do not use the CSS at all, the File Upload boxes overlap each other.

My other contact forms are fine, it is only this one form causing me headaches. Is this something I can solve with the appropriate block or have I messed up with my CSS somewhere?

Any help would be greatly appreciated.

Many thanks

[Fernando]

Hi Troyw,

You have a fixed width value which causes the issue as the screen goes smaller.

Try adding this CSS instead so that the width adjusts based in the available space:

span.wpcf7-form-control-wrap > .wpcf7-file {
    width: 100%;
}

[troyw]

Thanks Fernando, that seems to have done it.

If I want to target that specific ‘Submit’ Button on the Career page ( not the others contact forms), how do I do that? It’s just not quite sitting right, but if I adjust it, it messes up all the other forms?

Similarly, if I want to change the font color on my normal contact form /contact how do I target his specifically without affecting everything? I have added this code, but it doesn’t work

wpcf7-form-control-wrap .menu-find-us { color: #ffffff;}

Sorry, kind of 2 questions there, but they are related I guess.

Thanks

[Fernando]

What do you want the button to look like?

What specific elements of the contact form are you changing the color of? Is it just menu-find-us?

[troyw]

I just need to position the button on the career form more central

With the menu-find-us I just want to change the color of the text to white. But only on the contact us form, not the career form.

[Fernando]

The structure of the button is hard to target. Are you able to add a class to the p tag holding it?

Also its margin-left is pushing it to the left too much on mobile. You’ll need to address that.

Try this CSS for the menu in the Contact form:

body.page-id-15 span.wpcf7-form-control-wrap select[name="menu-find-us"] {
    color: red;
}

[troyw]

Hey Fernando,
Hahaha!, thanks. Sorry, that code changes the colour of the text in the ‘select’ area. I want to change the colour of the text above it “How did you find us?”
I want the text to be white as well

[Fernando]

How did you add that P Block? Are you able to add a class to it?

[troyw]

Hhuummm! Let me look into this and I’ll get back to you. I know what you mean though, so I will have a go at it next week. It’s Friday night and I’m properly done for this week, so having a wine now!
Have a great weekend Fernando, thanks.

[Fernando]

No problem! Have a great weekend as well!

[Author]

Posts