Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #27613

    Hi, when the theme is set to responsive and viewed on mobile, the checkout form for the state takes up the whole width of the screen and is now behind the zip code form.

    The credit card input form is also messed up. The cardholders name form goes off of the screen as well as the expiration date form, card security code form, and the description under the form.

    Can anyone help?

    I currently have responsive setting turned off so mobile customers can make purchases but if you would like to see this problem live, please tell me and I will turn it back on.



    We would like to see it live. Please give us a link to the website.




    Hello Ismael, the link is


    If possible, please email me at when you would like to see it live. Due to the amount of customers, cannot keep it active for long periods of time. Thank you.


    I took a screenshot of the problem when using the responsive theme. ->


    Hi codyfilms,

    It looks like there is a default minimum width for the fields which just needs to be defined. I also added some other clean up css in there too Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #payment div.payment_box {
    padding-left: 0;
    #payment div.payment_box p, #payment div.payment_box .form-row {
    width: 100%;
    min-width: 195px;
    fieldset {
    min-width: 195px;
    .woocommerce-validated select {
    min-width: 195px;

    It could be added to a media query so it only effects mobile but it doesn’t impact the section that much so that would be up to you. If you wanted to it would just be:

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
    /*all of the css right here instead*/




    Thank you for your response Devin. While that did clean that section up a little bit the forms width is still off of the screen.

    Here is another pic:

    I also left the responsive them active so you can view it at ->

    Thank you, I look forward to your response.


    I’ve played around with the settings and managed to get the “card number” & “card holder” form to the correct width. Only thing left is the expiration date dropdown menu and things would be ok.

    Edit: I’ve gotten it to work for the most part. Thanks for your help Devin!


    Glad we could help :)

    Let us know if you have any other questions or issues.

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Responsive Theme Checkout Problems’ is closed to new replies.