Community Forums 

Main Content

alignment of customer information fields on checkout pages

    Jun 20 2014 18:47:20

    #1

    calwolfcenter

    Join date : 2014-06-20      Posts : 3

    Hi, all. We're in the process of customizing an online store. Does anyone know if there is a way to control the alignment of field titles and fields for customer information (e.g. fields asking for shipping information, payment information, etc)? Currently, the name of the field is touching the box where customers would enter their data, and we'd love to be able to add a space or two between the field name and box. We have not been able to find a way to change the CSS on the checkout pages. If anyone has had any luck with this, we'd love ideas! Thanks!



    Jun 21 2014 18:29:48

    #2

    Don

    Join date : 2008-09-18      Posts : 487

    What's the URL ?

    DB.

    www.donbarrow.co.uk
    www.pacenotes.com
    Please either Share or Like my Facebook




    Jun 24 2014 18:49:08

    #3

    Josefant

    Join date : 2014-06-13      Posts : 9

    You could use jQuery and load additional css:

    $("<link/>", {
    rel: "stylesheet",
    type: "text/css",
    href: "/styles/yourcss.css"
    }).appendTo("head");



    Jun 27 2014 22:57:15

    #4

    calwolfcenter

    Join date : 2014-06-20      Posts : 3

    We did attempt to use this to load a separate CSS file previously, but it did not fix the alignment issue. Does anyone have an example if you've gotten this to work (so we can try to emulate)?

    In case it's helpful, here's a test URL we're using (store is not live yet, so this is not a permanent URL):

    http://californiawolfcenter.org/shop/index5.htm

    If you add an item to the cart and click Check Out, you can see an example of how the customer data fields are currently in direct contact with the titles of those fields. We'd love to be able to add a space or two between the title and the empty field. Thanks in advance!

    Josefant said You could use jQuery and load additional css:

    $("<link/>", {
    rel: "stylesheet",
    type: "text/css",
    href: "/styles/yourcss.css"
    }).appendTo("head");



    Jun 28 2014 10:32:15

    #5

    Geoff

    Join date : 2008-09-18      Posts : 415

    Your stylesheet - https://californiawolfcenter.org/_include/style/general5.css

    Find the selector td

    You have padding:10px 0;

    This is shorthand for -

    padding-top:10px;
    padding-right:0;
    padding-bottom:10px;
    padding-left:0;

    Adjust the values as neccessary to fix your problem (and to make the form somewhat more compact if you wish.)



    Jul 12 2014 17:30:47

    #6

    calwolfcenter

    Join date : 2014-06-20      Posts : 3

    Thank you so much. We've fixed the issue! I appreciate everyone's input!



    Geoff said Your stylesheet - https://californiawolfcenter.org/_include/style/general5.css

    Find the selector td

    You have padding:10px 0;

    This is shorthand for -

    padding-top:10px;
    padding-right:0;
    padding-bottom:10px;
    padding-left:0;

    Adjust the values as neccessary to fix your problem (and to make the form somewhat more compact if you wish.)