Title: Responsive Canvas…
Last modified: August 30, 2016

---

# Responsive Canvas…

 *  Resolved [artsyandi](https://wordpress.org/support/users/artsyandi/)
 * (@artsyandi)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/)
 * The registration form I am trying to edit is at:
    [http://s1091000.instanturl.net/causefunders.com/create-an-account/](http://s1091000.instanturl.net/causefunders.com/create-an-account/)
 * I am trying to make the signature field responsive to be full width and 150px
   tall in my form. I have applied the following line to the form code:
 * `[signature signature-register]`
 * THEN, I applied the following code to the Custom CSS area of my theme.
 *     ```
       @media screen and (max-width: 768px) {
           .wpcf7-form-control-signature-wrap {
               width:100%;
           }
       }
       .wpcf7-form-control-signature-body canvas{
           border: 1px dotted #BADA55;
       }
       ```
   
 * For some reason, the “canvas” code is working – the green border was applied.
   However, the width was not effected by the other CSS.
    Any suggestions on what
   I can do to resolve this issue?
 * I would also like the ability to edit the “clear” button… make it a text link
   rather than a button and right align it.
 * Any help is appreciated.
 * [https://wordpress.org/plugins/contact-form-7-signature-addon/](https://wordpress.org/plugins/contact-form-7-signature-addon/)

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

 *  Plugin Author [tameroski](https://wordpress.org/support/users/tameroski/)
 * (@tameroski)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878918)
 * Hi,
 * I got a 404 error on your page. However, the sample CSS only works when screen
   width is < 768 px. If you want the field to be 100% whatever the width is, juste
   remove the media query.
 *  Thread Starter [artsyandi](https://wordpress.org/support/users/artsyandi/)
 * (@artsyandi)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878941)
 * I’m still having the same issue.
    The form is now at [http://www.causefunders.com/create-account/](http://www.causefunders.com/create-account/)
 * and my custom CSS now reads:
 *     ```
       .wpcf7-form-control-signature-body{
               width:100% !important;
               padding-bottom: 8px;
           }
   
       .wpcf7-form-control-signature-body canvas{
           border: 1px dotted #BADA55;
       }
       ```
   
 * However, when I resize my window, it still is not responsive. When the window
   is too narrow it even overlaps the outside of the form window. Any suggestions
   on what I need to do from here to make it resize with the window?
 *  Plugin Author [tameroski](https://wordpress.org/support/users/tameroski/)
 * (@tameroski)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878943)
 * You apply the width to the wrong class i think : use .wpcf7-form-control-signature-**
   wrap**, instead of .wpcf7-form-control-signature-**body**, and that might be 
   ok.
 *  Thread Starter [artsyandi](https://wordpress.org/support/users/artsyandi/)
 * (@artsyandi)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878944)
 * Perfect, thank you!!!
 *  Plugin Author [tameroski](https://wordpress.org/support/users/tameroski/)
 * (@tameroski)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878950)
 * Closing topic

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

The topic ‘Responsive Canvas…’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7-signature-addon/assets/icon-256x256.jpg?rev
   =1208819)
 * [Contact Form 7 Signature Addon](https://wordpress.org/plugins/contact-form-7-signature-addon/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7-signature-addon/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7-signature-addon/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7-signature-addon/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7-signature-addon/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7-signature-addon/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [tameroski](https://wordpress.org/support/users/tameroski/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-canvas/#post-6878950)
 * Status: resolved