How to style my form properly?

  • Profile Image
    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


  • Profile Image
    Nik_C
    Answered on March 26, 2018 at 04:08 AM

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

    1522051705Screen Shot 2018-03-26 at 10.0

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

    Thank you!

  • Profile Image
    SUBTYPE
    Answered on March 26, 2018 at 08:43 PM
    Sorry about that the password is zr01zr01
    --
    Josh Zimmer
    ZANEROBE
    ________________________________
    ...
  • Profile Image
    Nik_C
    Answered on March 27, 2018 at 01:57 AM

    You're referring to this form: 

    1522129652Screen Shot 2018-03-27 at 7.46

     

    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.55 1522130226Screen Shot 2018-03-27 at 7.55

    We'll wait for your response.

    Thank you!

  • Profile Image
    SUBTYPE
    Answered on March 27, 2018 at 02:43 AM
    Hi there. Yes I’d liketo have the form wider like the second form and without the left indent.
    --
    Josh Zimmer
    ZANEROBE
    ...
  • Profile Image
    SUBTYPE
    Answered on March 27, 2018 at 02: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
    ...
  • Profile Image
    Nik_C
    Answered on March 27, 2018 at 04: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.53

    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.0

    Please try and let us know how it worked.

    Thank you!