Tighter Field Spacing

Hi @garyifpg

It’s an attribute of the md-form shortcode.

[md-form spacing=”tight”]

You can use the shortcode generator (material design button on the form editor) to set your options. The help tab also contains documentation.

Thanks,
Angus

Thanks Angus but there is no noticeable difference after applying that change.

I am also having problems with the Submit button color which is blue on blue. Making changes in Customize has no affect on it.

@garyifpg can you paste your form code here?

[md-form spacing="tight"]

[md-text label="Name"]
[text text-name]
[/md-text]
[md-text label="Email"]
[email email-540]
[/md-text]
[md-text label="Telephone"]
[tel tel-195]
[/md-text]
[md-text label="Company"]
[text text-company]
[/md-text]
[md-select label="I am a..."]
[select menu-Iama "Franchisor" "Franchise Consultant" "Franchise Supplier"]
[/md-select]
[md-select label="IFPG Member"]
[select menu-ifpg-member "Yes" "No"]
[/md-select]
[md-submit]
[submit "Submit"]
[/md-submit]

[/md-form]

@garyifpg the code looks right. Are you sure it doesn’t make a difference? It can be a bit subtle. Maybe try taking a screenshot of each and then comparing those.

Can you also send a link to your form (front end)? I will take a look.

Thanks,
Angus

https://ifpgretreat.com/landing/

After taking screenshots before/after, I see that there is a small difference. Can you let me know how I can make it tighter via CSS?

Also, can’t figure out why the button is blue on blue. CSS issue?

Hi @garyifpg

You can fix the button colour with this CSS:

#cf7md-form .mdc-button--raised:not(:disabled) {
  color: #FFF !important;
}

And tighten the spacing with this CSS:

#cf7md-form .mdc-layout-grid__inner {
  grid-gap: 12px; /* or whatever value looks best to you */
}

You can add this CSS under Appearance > Customize > Material Design Forms > Custom CSS.

Thanks,
Angus

Thank you Angus!

Gary