Hi,
Here’s an example of writing media queries.
@media only screen and (max-width: 768px) {
.page-id-59, wpcf7-form {
width: 100%;
}
}
If the resolution of the screens is less than 768px, then it will adjust the form’s width automatically. It will adopt whatever is your screen resolution size.
Add via Child Theme or use custom CSS plugin
Hope that helps. Thanks
Thread Starter
nonamer
(@localgreeneats)
Thank you William- it helps but in landscape mode for most devices, the form is choppy or broken. The name is separated from the rest of the form. How do I make it so it’s cohesive?
Thanks
Hi,
Can I have a the URL of your form? So that I can find the right CSS elements that needs to be updated using the browser’s developers tools.
Thread Starter
nonamer
(@localgreeneats)
Hi,
Thanks for the link. The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements. To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.
See Styling Contact Form 7 Forms for a general explanation of styling CF7 forms using CSS.
Use Firebug or Chrome Dev Tools to first understand and then change the CSS used for your CF7 form elements.
