CSS Style of checkbox and radio

Hi @thankssforhelp,

Please also share the link to a form page so that we can check further.

Kind regards,
Zafer

Hi Zafer,

thank you for your response. The link to the form page is as follows:
https://jurahelden.com/individualunterricht-1-person/?stundenzahl=5&personenzahl=1

Kind regards

Hi @thankssforhelp,

I checked this at our end but was unable to replicate the issue. Please see how this appears at my end in the following screenshot: https://ibb.co/f0Vby3L

Can you please confirm if you have managed to fix this?

Kind Regards,
Nebu John

Hi Nebu John @wpmudevsupport14,

thanks for your respond. I forgot to tell you that the issue exists on mobile site, I couldn’t fix the problem yet. On desktop view everything is fine.

Kind regards

Hi @thankssforhelp

Please try adding this CSS to the site:

@media only screen and (max-width:350px) {
  
	.ausbildungsstadium .forminator-radio-inline {
	  max-width:45%;
  }
	
	.rechtsgebiet .forminator-checkbox-inline {
		max-width:29%;
	}
	
	.nachhilfeart .forminator-radio-inline {
		max-width:28%;
	}
	
	
}

Note also:

– it’s better to add this via some “Custom CSS” option of theme (if there is any) or using some additional “custom css” type plugin (or if you are using custom child theme, then in that child theme’s CSS) rather than adding to form’s custom CSS as it may not work added directly to form;

– you may need to adjust values in CSS a bit

– this code seems to be working “down to” 339px page/viewport width; you may need to add some additional media query blocks with same code but different values for even smaller widths.

– if you are using cache on site/server, make sure to clear it fully after adding the code.

Best regards,
Adam

Hi Adam @wpmudev-support8,

perfect, thank you very much and sorry for the late feedback.

I have added the code directly to the form’s custom css, which works wonderfully.

Now the fields are inside the blue border as well as the blue frames itself are centered on the mobile page.

However, despite multiple adjustments to the values, I have not yet managed to get the radio fields or checkbox fields to fill the blue frame, i.e. no spacing left, right, top and bottom, see iphone-screenshot:
https://drive.google.com/file/d/1283VBxxlNV733fqMrXeyDYN24BnPlrHD/view?usp=sharing

Do you see a way to do this with CSS?

Thanks in advance and thanks again for the excellent work you do!

Hi @thankssforhelp

I hope you are doing well.

If we are on the same page you can do something like:

@media only screen and (max-width:600px) {
#radio-2 .forminator-field,
#checkbox-2 .forminator-field{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
}

#radio-2 .forminator-field .forminator-radio-label,
#checkbox-2 .forminator-field .forminator-checkbox-label{
    width: 100% !important;
    max-width: unset !important;
    margin: 0 !important;
}

#radio-2 .forminator-field label,
#checkbox-2 .forminator-field label{
    margin: 0;
    padding: 0;
    width: 100% !important;
    max-width: unset !important;
}
}

https://monosnap.com/file/baSEjVGVGUtkWPjxB0ec0t58zOlxK4

Best Regards
Patrick Freitas

Hi Patrick Freitas @wpmudevsupport12,

thank you very much – it works perfectly!

And thank you for the excellent work you guys always do.

Kind regards