Responsive Signature

Hi there

There’s nothing dumb in asking, and i admit the FAQ does not give a lot of details …

The code i suggest is not Javascript but CSS, and there are different solutions for you to include it in your theme :

• If you’re working on a paid theme, they usually got a “custom CSS” section where you can just paste the code.
• If you’re building your own theme or your paid theme doesn’t have such a functionality, you can add the code to the end of your style.css file, or use wordpress style queuing features.

Using this snippet, you’ll get a 100% width signature field on screens up to 768px wide :

@media screen and (max-width: 768px) {
    .wpcf7-form-control-signature-wrap {
        width:100% !important;
    }
}

• This reply was modified 7 years, 1 month ago by tameroski.

Ho, looks like i misunderstood the question …

If you’re talking about that code :

$('div.wpcf7 > form').wpcf7ResizeSignatures();

Just put it in somewhere in your code, like footer.php.

That should look like this in the end (not tested) :

<script>
$(window).on('resize', function(){
    $('div.wpcf7 > form').wpcf7ResizeSignatures();
});
</script>

Hey Tameroski,

Indeed, it was the second post I was curious about. For some reason, adding that snippet to my footer.php still does not appear to have an affect on signature field re-loading. I do have a paid theme and I’m wondering if maybe the themes responsive options are messing with the code working. Is there anything else I could try, or could I maybe send you my footer.php for you to check in case I’ve added the code incorrectly? Thanks for the help so far, though.

Matt