Hey everyone, I just started working on a website that previously used Gravity Forms. It seems like a really amazing plugin and I hope to use it more.
I’m trying to fix some styling issues I have and my CSS is coming up short.
It seems like it should be simple. I’m trying to Center Align all these items pieces:
If there is a way to apply it to all items that would be even more useful. Any help would be greatly appreciated. Thanks!
Can you share a link to the page on your site where we can see the form? Thank you.
Hey Chris,
Here is the link: Celebration of Like Package | Cremation Help
Thanks for the help!
Thank you for the link. I was able to accomplish some of that. I used this CSS:
body .gform_wrapper div.gfield--width-third {
text-align: center;
}
body .gform_wrapper div.ginput_product_price_wrapper {
display: block!important;
}
body .gform_wrapper span.ginput_quantity_label {
display:block;
}
That made the products look like this: firefox ofHX7uYjb8.png - Droplr
That will not move your descriptions like “(Serves 20-22)”, though. Try changing the “Description Placement” setting (for the whole form on the Form Settings or on the individual product fields under the Appearance panel) to “Above Inputs” and see if that changes it for you.
Description Placement on the Form Settings:
Description Placement on every field under Appearance:
Let us know how it turns out.
Hey Chris,
It worked brilliantly! The only issue is, it didn’t seem to effect the 2 items at the bottom?(sparkling water and juices). Any ideas?
Hi Alexander. Try adding some more rules to this block.
Originally:
body .gform_wrapper div.gfield--width-third {
text-align: center;
}
Try this:
body .gform_wrapper div.gfield--width-third,
body .gform_wrapper div#field_8_36,
body .gform_wrapper div#field_8_46,
body .gform_wrapper div#field_8_23,
body .gform_wrapper div#field_8_25 {
text-align: center;
}
New screenshot: firefox nWyKuO2ZK5.png - Droplr
Absolutely fantastic! I very much appreciate it! You’re a god send. While I’m annoying you…
How do I center the drop down menus. 
I’m guessing the top 2 require a different code than the bottom 2, simply because of them being in a single column? I’m I understanding this correctly?
Do you mean all the dropdown menus, the top two and bottom two?
For the bottom two, you have those in third-width columns. But nothing is in the last column. If you want these centered, they will first need to be in two one-half width columns.
Similarly, you have the top two dropdowns in a one-quarter width column, with three blank columns after. Put that on a row all by itself, then we can center it, or you can put that in the center of three columns, with the left and right being empty HTML fields.
Also, your page title says “Celebration of Like Package” in the browser. Not sure if that is intended or not.
Hey Chris,
I have changed the Column types like you asked and thanks for letting me know about the spelling mistake, it helped!
And I’ve screwed it up by disabling the quantity fields - any ideas?
Can you export this form and send me the JSON file?
Instructions for exporting a form:
Attach that to an email and send it to chris@rocketgenius.com. Thank you.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.