Making contact form 7 responsive

Hi, I use contact form 7 on my website www.babyworldandme.co.uk but on mobile devices the text fields aren’t responsive so don’t fit on the screen and look ugly. Is there some simple CSS code I can add to my childtheme stylesheet to fix this? Thanks so much :slight_smile:

Hello there,

Please try adding the following CSS code into Appearance > Customize > Additional CSS:


input[type="text"],  
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"] {
   max-width: 100%;
}

Regards,
Kharis

Thanks again Kharis for your help, that worked great :slight_smile:

Hi I have the same problem across all my Great Britsh Mums sites.The form doesn’t fit when viewed on a mobile. Can you help ? Example page with the problem is www.towerhamletmums.com/membership

Thanks

Hello there,

I visited the link you shared and the screen displayed “Server not found”. Is it valid?

Regards,
Kharis

Please tell me how can i make the given below link page to a responsive page…

Hi Kharis, I see you solved a similar problem.

Can I ask,
My datepicker popup gets cut off on mobile. im using sydney theme and contact form 7.
When you choose a date or a time it cuts off. Seems to work fine for the rest of the form being responsive but the popup seems to be a problem.
I cant find a solution anywhere. My website www.uk-photo-booth.co.uk can you help?

any help would be appreciated!
kevin

Hello Kevin,

The date time picker is not part of Sydney’s script. The styling rules reside in the jQuery date time UI. You might be interested to check this discussion:

Re-styling it is a complex task to do. Really sorry we can’t suggest you any code solution as it goes beyond our support service’s policy. You might need to hire a coder.

Thank you for your understanding.

Regards,
Kharis

1 Like

Thanks Kharis! Very much appreciated!