Tagged: 

Viewing 30 posts - 1 through 30 (of 36 total)
  • Author
    Posts
  • #1033740

    Hi, the fields on one of my forms aren’t lining up properly, how would I fix this in the CSS?

    #1033774

    Hey B,
    Please try this code in the General Styling > Quick CSS field:

    @media screen and (min-width: 960px) {
    #top .gform_wrapper .gform_body li>.gfield_label {
        width: 55% !important; 
    }
    }

    Best regards,
    Mike

    #1034154

    Hi Mike,

    When I added that code I got error messages saying there was unexpected tokens and braces on the first line and last line

    #1034217

    Hi,

    Mike gave you css so it shouldn’t have produced an error. Can you screenshot the issue?

    Best regards,
    Jordan Shannon

    #1034222

    Hi Jordan,

    Screenshot link below

    #1034230

    Hi,
    Thanks for the screenshot, it looks like you copied the code from an email, instead of from the thread.
    I see that your code includes a > instead of the greater than symbol >
    This caused many errors in the code checker, please try again, but copy the code from the thread directly, or try typing it in yourself.

    Best regards,
    Mike

    #1034233

    Hi Mike,

    Thanks for the heads up, I copied from the thread this time and didn’t get any errors but its not looking quite right, I wanted the form labels to be beside the form boxes like they are on this page (see private content) but on that page they need to be aligned vertically with the form field boxes as well

    #1034302

    Hi,
    Thanks for the link, when I look at it the labels are over the fields, but your description above sounds like you want them side-by-side, so I put together this css for you to try in your WordPress > Customize > Additional CSS or Enfold Theme Options > General Styling > Quick CSS field

    @media only screen and (min-width: 641px) {
    html:not([dir=rtl]) .gform_wrapper ul.gform_fields:not(.top_label) .ginput_container:not(.ginput_container_time):not(.ginput_container_date) {
        width: 70% !important; 
        margin-left: 0px !important; 
        margin-bottom: 3% !important; 
    }
    #top .gform_wrapper .gform_body li>.gfield_label {
        float: left !important; 
    }
    #top .gform_wrapper .gform_body li>.ginput_container {
        width: 50% !important; 
        max-width: 300px !important; 
        float: right !important; 
    }
    }

    Please see the screenshot in Private Content area, of the expected results.
    Once you add the css, Please clear any cache plugin and your browser cache and check.

    Best regards,
    Mike

    #1034903

    Hi Mike,

    Thanks for this, yes that’s exactly how I want it.

    I tried that code and got an error message, see screenshot in private area

    #1034906

    Hi,
    opps, please add a ” } ” at the end :)

    Best regards,
    Mike

    #1034907

    I thought that might have been it :)
    Thanks, that has lined it up vertically but on the contact page first and name are on two separate lines and then on the book page the fields are really far away from the labels

    #1034919

    Hi,
    Thanks, I have taken a look at this and some of the forms are a little different, but I tried to recreate this for all of the forms, but please remove all of the css for the forms and use this instead:

    @media only screen and (min-width: 641px) {
    .gform_wrapper .gform_body {
        width: 100% !important; 
        max-width: 500px !important; 
        margin-left: 0px !important; 
        margin-bottom: 3% !important; 
    }
    #top .gform_wrapper .gform_body li>.gfield_label {
      margin-left: 0px !important;
        width: 45% !important;
        max-width: 150px !important; 
    }
    }
    #top .gform_wrapper .gform_body li>.ginput_container {
        width: 50% !important; 
        max-width: 300px !important; 
        float: left !important; 
    margin-left: 0px !important;
    }
    #top .gform_wrapper .gform_body li>.ginput_container {
        margin-bottom: 3% !important; 
    }
    }

    They should all be very close now, but if there are still any issues, please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    #1034991
    This reply has been marked as private.
    #1035387

    Hi,
    Thanks for the login, I made some adjustments, Please clear your browser cache and check.

    Best regards,
    Mike

    #1035395
    This reply has been marked as private.
    #1036100

    Hi,
    For the trade button, please try:

    @media screen and (min-width: 769px) {
    #top.page-id-848 .gform_wrapper .gform_footer {
        margin-left: 7%;
    }
    }

    Please feel free to adjust to suit.
    For the dropdown arrow, please try:

    #top.page-id-290 .gform_wrapper .ginput_container_select:after {
        content: " ";
        display: block;
        left: 80% !important; 
    }
    

    Please feel free to adjust to suit, and Please clear your browser cache and check.

    Best regards,
    Mike

    #1036327

    Thanks Mike, I’ve adjusted the trade page, for the drop down arrow – there are a few forms that have a drop down with arrow, if I remove the page id part of the code will it change all of them?

    #1036358

    I removed the page id part and the down is now showing correctly on all the forms, thanks for all your help :)

    #1036371
    This reply has been marked as private.
    #1036379

    Hi,
    It seems the css for the other forms may be starting to effect each other, typically you will not want to make the css too global when the forms are so different. How many forms are there?
    Please try this css:

    @media only screen and (min-width: 641px) {
    #footer-newsletter #gform_wrapper_11.gform_wrapper #gform_11 .gform_body {
        max-width: 700px !important;
        width: 700px !important;
    }
    #footer-newsletter .container form .gform_body li.gfield {
    float: none !important;
    }
    }

    Best regards,
    Mike

    #1036382
    This reply has been marked as private.
    #1036384

    Hi,
    Did you find the css I posted works?
    To find the code that is causing the issue, please remove all of the code and add it back in block by block.
    How many of the 9 are the same?

    Best regards,
    Mike

    #1037869
    This reply has been marked as private.
    #1038063

    Hi,
    Ok, so this was the css that made the footer form brake into two lines, but I couldn’t find which form might be having problems now with the lack of the css above. Does this mean that all of the forms are as you expect now?

    Best regards,
    Mike

    #1038225
    This reply has been marked as private.
    #1038290

    Hi,
    I was having an issue isolating the cause, so I changed the css a little and checked it against the pages listed in the Private Content area and the footer. Please clear your browser cache and check, and let me know if I missed a page.

    Best regards,
    Mike

    #1038310
    This reply has been marked as private.
    #1038327

    Hi,
    I have corrected the one that had a different footer form.
    I have also made the changes to align the labels and boxes.
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1039219
    This reply has been marked as private.
    #1039232

    Hi,
    opps, good catch. I restore that code now, Please clear your browser cache and check.

    Best regards,
    Mike

Viewing 30 posts - 1 through 30 (of 36 total)

You must be logged in to reply to this topic.