Tagged: form
-
AuthorPosts
-
November 15, 2018 at 12:36 am #1033740
Hi, the fields on one of my forms aren’t lining up properly, how would I fix this in the CSS?
November 15, 2018 at 5:49 am #1033774Hey 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,
MikeNovember 15, 2018 at 9:39 pm #1034154Hi Mike,
When I added that code I got error messages saying there was unexpected tokens and braces on the first line and last line
November 16, 2018 at 1:40 am #1034217Hi,
Mike gave you css so it shouldn’t have produced an error. Can you screenshot the issue?
Best regards,
Jordan ShannonNovember 16, 2018 at 1:48 am #1034222Hi Jordan,
Screenshot link below
November 16, 2018 at 3:07 am #1034230Hi,
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,
MikeNovember 16, 2018 at 3:16 am #1034233Hi 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
November 16, 2018 at 7:08 am #1034302Hi,
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,
MikeNovember 18, 2018 at 9:37 pm #1034903Hi 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
November 18, 2018 at 9:56 pm #1034906November 18, 2018 at 10:01 pm #1034907I 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 labelsNovember 18, 2018 at 11:20 pm #1034919Hi,
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,
MikeNovember 19, 2018 at 4:08 am #1034991This reply has been marked as private.November 20, 2018 at 3:39 am #1035387Hi,
Thanks for the login, I made some adjustments, Please clear your browser cache and check.Best regards,
MikeNovember 20, 2018 at 4:38 am #1035395This reply has been marked as private.November 21, 2018 at 3:21 pm #1036100Hi,
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,
MikeNovember 21, 2018 at 9:38 pm #1036327Thanks 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?
November 22, 2018 at 2:20 am #1036358I removed the page id part and the down is now showing correctly on all the forms, thanks for all your help :)
November 22, 2018 at 3:16 am #1036371This reply has been marked as private.November 22, 2018 at 5:16 am #1036379Hi,
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,
MikeNovember 22, 2018 at 5:21 am #1036382This reply has been marked as private.November 22, 2018 at 5:30 am #1036384Hi,
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,
MikeNovember 27, 2018 at 1:07 am #1037869This reply has been marked as private.November 27, 2018 at 4:33 pm #1038063Hi,
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,
MikeNovember 27, 2018 at 9:55 pm #1038225This reply has been marked as private.November 28, 2018 at 12:10 am #1038290Hi,
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,
MikeNovember 28, 2018 at 2:39 am #1038310This reply has been marked as private.November 28, 2018 at 5:19 am #1038327Hi,
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,
MikeNovember 30, 2018 at 4:49 am #1039219This reply has been marked as private.November 30, 2018 at 7:28 am #1039232 -
AuthorPosts
- You must be logged in to reply to this topic.