• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

Make Gravity Forms $ sign smaller

WordPress tips and tricks by the Australian WordPress expertsI seem to be doing alot of work with the Gravity Forms plugin for WordPress at present. I love the flexibility of Gravity Forms and have installed it on several hundred websites for all sorts of uses from basic contact forms to Mailchimp integrated subscribe forms to complex quoting calculators. After my post regarding removing decimal places in the price field, one reader asked how to make the currency symbol smaller than the numbers in the price.

How to style the Gravity Forms currency symbol

jQuery could be used but by far the simplest way of reducing the size of the currency symbol is to use CSS. More specifically the ::first-letter pseudo-element.

If we merely add the necessary CSS declaration to a Gravity Forms ID or class using the pseudo-element then, usually, nothing will happen. Typically the price field will have a display property with the value of inline e.g.

#input_4_4 {
display: inline;
}

Why the ::first-letter pseudo-element won’t work in this instance is that the display value must be one of block, inline-block, table-cell, list-item ortable-caption to work. First-off therefore add the following CSS to ensure that we can use the ::first-letter pseudo-element (replace #input_4_4 with the ID of your field):

#input_4_4 {
display: inline-block;
}

Now we’re ready to style the currency symbol. In the following CSS example replace the ID with that of your field and change the selectors as required. Be sure to place the following CSS in your stylesheet after the CSS provided above:

#input_4_4::first-letter {
font-size: 75%;
font-weight: 200;
}

Your , , or other currency symbol may now be styled using CSS as needed.

Found this useful? Please share:

Related

  • How to remove cents in Gravity Forms prices
  • How to get Mailchimp Subscriber Popup working in WordPress
  • Help. Gravity Forms not accepting Stripe Key

Filed Under: WordPress

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

Reader Interactions

Leave a Reply Cancel reply

You are here: Home / WordPress / Make Gravity Forms $ sign smaller

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2022 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service