Navigation
Archive / contact form 7 width
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 17, 2016 at 12:07 pm #1219588
    armintz
    Participant

    out of the box, contact form 7 looks a little ridiculous spanning the entire width of the page, so i’m using this code below to make it look a bit nicer (smaller width!)

    .wpcf7 input, textarea {
    width: 450px !important;
}

    the problem is that this doesn’t really work on mobile/small screens, as you can see in the first attached screenshot.

    it also seems to throw off the “send” button in regular/desktop view – see second screenshot (send button appears slightly to the left of the form above it, rather than aligned perfectly below it).

    is there a more appropriate code i can be using? i searched the forum and tried a few different variations, but none seemed to work for my particular case. i’ll reply with the link/password to view the page. thanks!

    October 17, 2016 at 12:09 pm #1219597
    armintz
    Participant
    This reply has been marked as private.
    October 17, 2016 at 12:21 pm #1219613
    Thai
    Moderator

    Hi There,

    Please delete your custom CSS and try with this CSS instead:

    .wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap textarea {
    max-width: 450px;
}

    Hope it helps 🙂

    October 17, 2016 at 4:19 pm #1219899
    armintz
    Participant

    perfect, thank you!

    October 17, 2016 at 5:09 pm #1219949
    Nico
    Moderator

    Happy to hear that.

    Feel free to ask us again.

    Thanks.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1219588 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>