Odd appearance to check box set up.

Hi @gene-stevo

Hope you are doing fine.

About your questions:

1/ why is the label shown in a much larger font to the other fields in the form?

The fields have label elements while the checkbox has an h4 header . In this case you can apply the following css code to make the font look the same:

.entry-content h4 {
    font-size: 2rem!;
    font-weight: 400;
    font-family: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;
    letter-spacing: normal;
}

2/ how do I add some space between the actual check box and the start of the associated message?

You can add a margin to the right of the checkbox like this:

input[type="checkbox"] {  
    margin-right: 5px!important;
}

Hope this information helps.

Kind regards

Luis

Thread Starter

(@gene-stevo)

Nebu John – WPMU DEV Support

Many thanks for your help with this Luis, however (there’s always a “however”). If I add the .entry-content h4 to WP>Customise>Additional CSS, it does change to serif font but changing the font-size or weight has no effect. Viewed on mobile (Android) it has no effect at all.
If I also add the input[type-“checkbox”] the site crashes when I try to save changes. If I instead add it to Forminator>Appearance>Custom CSS it has no effect.
Also if I try to enlarge the size of the check box via Appearance>Layout>Custom, the change has no effect.
There is now also another problem. The help I had fixing the date picker field in this thread- Post Link: https://www.ads-software.com/support/topic/calendar-field-show-text-underneath-when-field-expanded/#post-16507860 no longer works when viewed on mobile. I’m certain it did when intially applied.
I’m using: WP 6.2.2 Theme TwentyTwenty Forminator 1.24.6
Many thanks for your continued support.
Cheers, Eugene.

This reply was modified 1 year, 8 months ago by gene-stevo.

Plugin Support

(@wpmudevsupport14)

Hi @gene-stevo,

I can’t see any difference in the font size of the checkbox when I check this at my end, can you please confirm if you have managed to fix this? However, I can notice the margin issue.

If I also add the input[type-“checkbox”] the site crashes when I try to save changes.

It appears that the issue you mentioned earlier regarding the CSS not working may be related to the current issue. It’s possible that there was a glitch in how the CSS was added.

Can you please share the complete CSS from your customizer in your next response so that we could check things further?

Kind Regards,
Nebu John

Thread Starter

(@gene-stevo)

Hi Nebu,
As I said, the font size of the label can’t be changed, editing font-size has no effect. The only effect is to change from h4 to a serif font.
As requested here is the full content from my WordPress>Appearance>Customise>Additional CSS listing.

/* Smaller Heading Font please */

@media (min-width: 700px) {
? h1, .heading-size-1 { font-size: 4rem; }
? h2, .heading-size-2 { font-size: 3.2rem; }
? h3, .heading-size-3 { font-size: 3rem; }
? h4, .heading-size-4 { font-size: 2.5rem; }
}

/* Reduce white space around stuff */

@media (min-width: 700px) {
? .widget .widget-title { margin-bottom: 2rem; }
? .post-inner { padding-top: 2rem; }
? .footer-widgets-outer-wrapper { padding: 3rem 0; }
? #site-footer { padding: 3rem 0; }
}

.singular .entry-header {
? padding: 2rem 0;
}

body:not(.singular) main > article:first-of-type {
? padding: 2rem 0 0;
}

.archive-header {
? padding: 2rem 0;
}

.error404 #site-content {
? padding-top: 2rem;
}

/* Alter width of text area */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
??? max-width: 80rem;
??? width: calc(100% - 10rem);
}

/* adjust font size for forminator lables*/

label {
??????????????? display: block;
??????????????? font-size: 2rem;
??????????????? font-weight: 400;
??????????????? margin: 0 0 0.5rem 1rem;
}

/* adjust font size for post header*/

h2.entry-title {
??? font-size: 3.5rem;
}

@media (min-width: 1000px) {
? #site-header > .header-inner {
??? flex-direction: column;
? }

? .header-titles-wrapper {
??? margin: 0 0 3rem 0;
? }

? .header-titles {
??? justify-content: center;
??? margin: 0;
? }

.is-style-outline>:where(.wp-block-button__link), :where(.wp-block-button__link).is-style-outline {
??????????????? border: 2px solid;
}

??????????????? /* forminator date picker edits*/

table.ui-datepicker-calendar {
??? background-color: #fff;
}
#ui-datepicker-div{
??? background: #fff;
??? padding: 10px;
}
.ui-datepicker-header{
??? display: grid;
??? grid-template-columns: 1fr 1fr;
??? align-items: center;
??? grid-gap: 6px;
}
.ui-datepicker-title{
?? grid-column: 1 / -1;
?? display: flex;
?? justify-content: space-between;
?? gap: 6px;
}
.ui-datepicker-title select{
??? flex: 1;
}
.ui-datepicker-header a{
??? cursor: pointer;
}

??????????????? /* forminator check box label edits*/

.entry-content h4 {
??? font-size: 2rem!;
??? font-weight: 400;
??? font-family: NonBreakingSpaceOverride, "Hoefler Text", "Noto Serif", Garamond, "Times New Roman", serif;
??? letter-spacing: normal;
}

Plugin Support

Zafer – WPMU DEV Support

(@wpmudevsupport15)

Hi @gene-stevo,

I hope you are doing well today!

Please try the following CSS code instead and let us know how it goes.

/* Font size, family, letter space inheritance for consent checkbox */
#forminator-module-4639 #checkbox-1 h4 {
    font-size: inherit !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
}

/* Adjust the right margin of the consent checkbox */
#forminator-module-4639 #checkbox-1 input {
    margin-right: 10px !important;
}

Kind regards,
Zafer

Thread Starter

(@gene-stevo)

Many thanks Zafer, that’s a lot better though lable still a bit big/bold. I can live with that.
There is still the problem that the fixes don’t work on Android, not mobile or tablet. And as per my previous comment, the date picker fixes dont work on Android.

There is now also another problem. The help I had fixing the date picker field in this thread- Post Link: https://www.ads-software.com/support/topic/calendar-field-show-text-underneath-when-field-expanded/#post-16507860 no longer works when viewed on mobile. I’m certain it did when intially applied.
I’m using: WP 6.2.2 Theme TwentyTwenty Forminator 1.24.6

Many thanks for your help with these issues,
Best wishes, Eugene

Plugin Support

Zafer – WPMU DEV Support

(@wpmudevsupport15)

Hi again @gene-stevo,

It seems @media (min-width: 1000px) { was not closed properly with } so the code after it only affects the screens larger than 1000px. I closed that one and updated the whole code as below. Please paste this for the entire Additional CSS section and you can alter font-size values as per your requirement.

/* Smaller Heading Font please */

@media (min-width: 700px) {
  h1, .heading-size-1 { font-size: 4rem; }
  h2, .heading-size-2 { font-size: 3.2rem; }
  h3, .heading-size-3 { font-size: 3rem; }
  h4, .heading-size-4 { font-size: 2.4rem; }
}

/* Reduce white space around stuff */

@media (min-width: 700px) {
  .widget .widget-title { margin-bottom: 2rem; }
  .post-inner { padding-top: 2rem; }
  .footer-widgets-outer-wrapper { padding: 3rem 0; }
  #site-footer { padding: 3rem 0; }
}

.singular .entry-header {
  padding: 2rem 0;
}

body:not(.singular) main > article:first-of-type {
  padding: 2rem 0 0;
}

.archive-header {
  padding: 2rem 0;
}

.error404 #site-content {
  padding-top: 2rem;
}

/* Alter width of text area */

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 80rem;
    width: calc(100% - 10rem);
}

/* adjust font size for forminator lables*/

label {
	display: block;
        font-size: 2rem;
        font-weight: 400;
        margin: 0 0 0.5rem 1rem;
}

/* adjust font size for post header*/

h2.entry-title {
    font-size: 3.5rem;
}

@media (min-width: 1000px) {
  #site-header > .header-inner {
    flex-direction: column;
  }

  .header-titles-wrapper {
    margin: 0 0 3rem 0;
  }

  .header-titles {
    justify-content: center;
    margin: 0;
  }
} /* Closing of media tag */

.is-style-outline>:where(.wp-block-button__link), :where(.wp-block-button__link).is-style-outline {
    border: 2px solid;
}

/* forminator date picker edits*/
table.ui-datepicker-calendar {
    background-color: #fff !important;
}
#ui-datepicker-div{
    background: #fff !important;
    padding: 10px;
}
.ui-datepicker-header{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    grid-gap: 6px;
}
.ui-datepicker-title{
   grid-column: 1 / -1;
   display: flex;
   justify-content: space-between;
   gap: 6px;
}
.ui-datepicker-title select{
    flex: 1;
}
.ui-datepicker-header a{
    cursor: pointer;
}

/* Font size, family, letter space inheritance for consent checkbox */
#forminator-module-4639 #checkbox-1 h4 {
    font-size: 2rem !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
}

/* Adjust the right margin of the consent checkbox */
#forminator-module-4639 #checkbox-1 input {
    margin-right: 10px !important;
}

Please let us know in case you need further help on this.

Kind regards,
Zafer

Thread Starter

(@gene-stevo)

Many, many thanks Zafer, you are a star. Works great now.
I can now mark this resolved.
Cheers, Eugene

Thread Starter

(@gene-stevo)