Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 22, 2015 at 4:41 am #491668
    eric84

    Hi,

    I am using Braintree plugin and Woocommerce. On checkout page Credit Card Month and Date stuck on top of each other.
    Would look much better if they were in line. Please see http://screencast.com/t/ESrqgo51i

    Link to actual page in private content.

    Thank you for your help in advance.

    Eric

    August 22, 2015 at 6:34 pm #491740
    Günter

    Hi eric84!

    Thank you for using our theme.

    In custom.css or Enfold -> General Styling -> Quick CSS field (or when using a child theme: in styles.css of the child theme or Enfold-Child -> General Styling -> Quick CSS field) put the following and adjust the values as needed:

    
#braintree-cc-exp-year {
    margin-top: 5px !important;
}
#braintree-cc-cvv_field {
    margin-top: -30px !important;
}

    Best regards,
    Günter

    August 22, 2015 at 9:21 pm #491758
    eric84

    Hi Günter,

    Thank you for awesome support and quick response time.

    Is it possible to get it to look like this http://screencast.com/t/64SNuygqyup

    Eric

    August 25, 2015 at 11:59 am #492823
    Andy

    Hi!

    I couldn’t find the form you are showing via screenshot on your website. Where it it? did you remove it? we need to inspect the elements. Please provide us a precise link with the form in question.

    Cheers!
    Andy

    August 25, 2015 at 5:58 pm #493130
    eric84

    Hi Andy,

    Included the link in the private content area. It’s on the very bottom of the page or a regular checkout page, any product needs to be added to cart along with the shipping zipcode for woocommerce to show payment options and the form in question.

    Currently the CC fields look like this http://screencast.com/t/kVbOLdXHillQ

    I would like them to look like this : http://screencast.com/t/64SNuygqyup (this is not a real screenshot, I piece it together with paintbrush)

    Thank you for your help.

    Eric

    August 26, 2015 at 9:58 am #493371
    Ismael

    Hey!

    Please add this css code:

    p.form-row.form-row-last.validate-cc-exp-date.woocommerce-validated {
  clear: both;
  float: left;
}

p#braintree-cc-cvv_field {
  margin-top: 20px !important;
}

    Cheers!
    Ismael

    August 27, 2015 at 6:40 pm #494394
    eric84

    Hi Guys,

    I tried Gúnter’s code:
    #braintree-cc-exp-year {
    margin-top: 5px !important;
    }
    #braintree-cc-cvv_field {
    margin-top: -30px !important;
    }

    Along with Ismael’s:
    p.form-row.form-row-last.validate-cc-exp-date.woocommerce-validated {
    clear: both;
    float: left;
    }

    p#braintree-cc-cvv_field {
    margin-top: 20px !important;
    }

    Ismael’s code is giving me an odd behavior, the CC month and year fields are jumping. Please see this screenshot video https://www.dropbox.com/s/akzh3oks3rcucjy/Braintree%20CC%20Fields.mp4?dl=0.

    I tried Ismael’s code by itself as well and I am not getting the results I am looking for – this http://screencast.com/t/64SNuygqyup

    Right now I have Ismael’s and Gunter’s code’s are in Quick CSS field.

    Thank you for awesome support.

    August 31, 2015 at 11:53 am #495726
    Andy

    Hi!

    try this code:

    p.form-row.form-row-last.validate-cc-exp-date {
display: flex;
position: relative;
top: 117px;
left: -298px;
float: left; 
}
p.form-row.form-row-last.validate-cc-exp-date label {
position: absolute;
top: -30px;
}
p#braintree-cc-cvv_field {
margin-top: 100px !important;
}

    Regards,
    Andy

    September 2, 2015 at 7:42 pm #497347
    eric84

    Hi Guys,

    Last code is not working well either please see screenshots:

    On mobile the CC month and year fields are gone: http://screencast.com/t/46sl45ZHDMX

    In full screen the fields are misaligned: http://screencast.com/t/BVuZS64C

    Eric

    September 3, 2015 at 1:00 pm #497591
    Andy

    Hi!

    I can’t see that you implemented the code on your website and be aware of that we don’t provide support for 3rd party plugins. Normally you would need to ask plugin’s author for help. However, try using media queries, something like this:

    @media only screen and (max-device-width: 736px) {
p.form-row.form-row-last.validate-cc-exp-date {
display: flex;
position: relative;
top: 117px;
left: -298px;
float: left; 
}
p.form-row.form-row-last.validate-cc-exp-date label {
position: absolute;
top: -30px;
}
p#braintree-cc-cvv_field {
margin-top: 100px !important;
}
}

    adjust the code as needed by yourself. Try to play around with different value until it fits to you.

    Best regards,
    Andy

    September 4, 2015 at 8:46 pm #498590
    eric84

    Hi guys,

    Thank you for all your help.

    I tried Andy’s code as well, but it didn’t work.

    The fix is a bit more complex then I originally anticipated – way beyond my skill level.

    I am just going to leave it as it is.

    Eric

    September 4, 2015 at 8:50 pm #498591
    Basilis

    Hi!

    I am sorry we could not assist you better. I hope we can help with anything else related to our theme.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Cheers!
    Basilis

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Braintree plugin and Woocommerce checkout CC Month and Date stuck together’ is closed to new replies.