media query

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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)

    https://www.localgreeneats.com/contact

    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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘media query’ is closed to new replies.