Responsive, Full-Width Submit Button

  • Resolved dalai2017

    (@dalai2017)


    8 years, 11 months ago

    Hello.

    We’ve styled a simple form with WPforms and I’m not sure how to make the Submit button responsive for mobile devices.

    I’m trying to make the “submit” button the full length of the field containers for a streamline look. I’ve tried setting the width to 100%, setting the margin to “0 auto” and setting a max-width. I’m not sure if some of my existing style code is working against it?

    Here’s the page the form is on: http://dalaigroup.com/contact-us

    This is the additional CSS we currently have. I’m not sure if I missed a symbol, but it was unresponsive when I tried to set a max-width, margin auto, width 100%, etc. Is there anything else I can do? Thank you for your time inspecting it.

    /#wpforms-15468 .wpforms-submit {
    width: 750px !important;
    margin: 0 auto !important;
    border-radius: 600px !important;}

    #wpforms-15468 .wpforms-form input, .wpforms-form textarea{
    border: none !important;
    border-bottom: 1px solid #cbcbcb !important;
    }

    #wpforms-15468 .wpforms-form textarea{
    height: 38px !important;
    resize: none !important;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Jess Quig

    (@jquigam)

    8 years, 11 months ago

    Hi dalai2017,

    It looks like you almost had it! It looks like the reason that the max-width wasn’t working is because the width was too wide, allowing the button to spill over the edge of the container. Here’s the revised CSS I would suggest:

    
#wpforms-15468 .wpforms-submit {
    margin: 0 auto !important;
    border-radius: 600px !important;
}

#wpforms-15468 .wpforms-form input, .wpforms-form textarea {
    border: none !important;
    border-bottom: 1px solid #cbcbcb !important;
}

#wpforms-15468 .wpforms-form textarea {
    height: 38px !important;
    resize: none !important;
}

#wpforms-15468 .wpforms-submit-container,
#wpforms-15468 .wpforms-submit {
    width: 100% !important;
}

    I removed the 750px width, setting it instead to 100% for both the button and it’s container.

    Could you give that a shot and let us know how it goes?

    Thanks! 🙂

    Thread Starter dalai2017

    (@dalai2017)

    8 years, 11 months ago

    That works perfectly! Thank you for organizing my code!

    Thread Starter dalai2017

    (@dalai2017)

    8 years, 11 months ago

    Hi Jess,
    One more form puzzle, here.
    I am having a similar responsive problem with one of my other forms: http://dalaigroup.com/services/digital-ux/
    First, the button is not responsive on mobile.

    The field information and the submit button should be the same streamline width, as demonstrated by the current pixel settings. Both the field information and the button need to be responsive for mobile devices, so I should be using percentages… but the form should not take up the full width of the page.

    So, there are 2 new variables. 1) The field information and the button should only have a width of about 75% of the page. 2) The form information and button should be centered on the page.

    I’ve tried to incorporate all of this and things ended up misaligned or unresponsive on my phone. Here’s what I have set up currently. Any help is appreciated!

    #wpforms-15737 .wpforms-field-container {
    max-width: 800px !important;
    margin: 0 auto !important;
    }

    #wpforms-15737 .wpforms-submit-container {
    text-align:center;
    }

    #wpforms-15737 .wpforms-submit {
    width: 800px !important;
    border-radius: 600px !important;
    }

    #wpforms-15737 .wpforms-form input, .wpforms-form textarea{
    border: none !important;
    border-bottom: 1px solid #cbcbcb !important;
    }

    #wpforms-15737 .wpforms-form textarea{
    height: 38px !important;
    resize: none !important;
    }

    Jess Quig

    (@jquigam)

    8 years, 11 months ago

    Hi dalai2017,

    Could you give this CSS a try?

    #wpforms-15737 .wpforms-submit-container {
    width: 100%;
    text-align: center;
}

#wpforms-15737 .wpforms-submit {
    width: 75% !important;
}

    Let me know if that does what you’re looking for 🙂

    Thread Starter dalai2017

    (@dalai2017)

    8 years, 11 months ago

    Sorry for the double post. That’s exactly what I needed for the second form. Thank you, again.

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

The topic ‘Responsive, Full-Width Submit Button’ is closed to new replies.