How to style my form properly?

  • SUBTYPE
    Asked on March 25, 2018 at 11:02 PM

    Hello,


    I'm having difficulty styling my form. I'm trying to get the width of my form to fill the container on and not have the padding on the left. See here - https://subtype.myshopify.com/pages/returns

    Is there any chance someone could help me?


    I'd like to replicate the styling of the form on this page so that the site's look and feel remains consistent - https://subtype.myshopify.com/pages/contact


  • Nik_C
    Replied on March 26, 2018 at 4:08 AM

     I couldn't check your form since it is password protected:

    1522051705Screen Shot 2018 03 26 at 10 Screenshot 10

    Could you please share us a password so we can check the form?

    Thank you!

  • SUBTYPE
    Replied on March 26, 2018 at 8:43 PM
    Sorry about that the password is zr01zr01
    --
    Josh Zimmer
    ZANEROBE
    ________________________________
    ...
  • Nik_C
    Replied on March 27, 2018 at 1:57 AM

    You're referring to this form: 

    1522129652Screen Shot 2018 03 27 at 7 Screenshot 10

     

    How would you like to have that form showing?

    I checked both forms and the form on the second page is pretty much the same to me except the width of some fields, do you want to have fields in the first form wider?

    1522130171Screen Shot 2018 03 27 at 7 Screenshot 21 1522130226Screen Shot 2018 03 27 at 7 Screenshot 32

    We'll wait for your response.

    Thank you!

  • SUBTYPE
    Replied on March 27, 2018 at 2:43 AM
    Hi there. Yes I’d liketo have the form wider like the second form and without the left indent.
    --
    Josh Zimmer
    ZANEROBE
    ...
  • SUBTYPE
    Replied on March 27, 2018 at 2:43 AM
    Also your screen shot looks different to mine. I have and indent on the left of my form.
    [image1.jpeg]
    --
    Josh Zimmer
    ZANEROBE
    ...
  • Nik_C
    Replied on March 27, 2018 at 4:10 AM

    You can insert the below CSS to your Custom CSS of the website:

    .rte {

        margin-left: -20%;

    }

    That will move the form to the left:

    1522137196Screen Shot 2018 03 27 at 9 Screenshot 10

    And then insert the below CSS to your Custom CSS field:

    .form-textbox {

        width: 443px!important;

        max-width: 500px!important;

    }

    input#first_3 {

        width: 200px!important;

    }

    input#last_3 {

        width: 232px!important;

    }

    It should show like this :

    1522138195Screen Shot 2018 03 27 at 10 Screenshot 21

    Please try and let us know how it worked.

    Thank you!