CoBlocks Checkbox/Label Alignment Issue

Hello CoBlocks Support Team,

I’m experiencing a persistent alignment issue with the checkbox fields (labels and checkboxes) in my CoBlocks forms on several pages of my site. The submit button also appears left-aligned on mobile.

Problem Description:
On mobile devices (screen width <= 768px), the checkboxes and their corresponding rose variety labels are not aligning correctly. They often wrap awkwardly, cause text to break onto new lines in a misaligned way, or overlap, making the forms difficult to use. The submit button is also not centered.

Affected Pages:

• [Link from above]
• [Link from above]
• [Link from above]
• [Link from above]

What I’ve Already Tried (Troubleshooting Steps):
I have extensively tried to fix this using custom CSS in the “Additional CSS” section of the WordPress Site Editor (Appearance > Editor > Styles > Additional CSS).

• I’ve used high specificity selectors, including page-specific body classes (.page-id-XXX).
• I’ve tried various CSS properties like display: block, display: flex, float: none, clear: both, width: 100%, box-sizing: border-box, and aggressive !important flags to try and override styles.
• I have thoroughly cleared all website caches (WordPress caching plugin, server-side cache if applicable, CDN cache if applicable) and my browser cache (including testing in incognito mode).

My Current CSS (pasted in Additional CSS):
`css<br>/* FINAL ATTEMPT – Targeting list items directly and aggressively resetting */<br>@media only screen and (max-width: 768px) {</p> <pre class=”wp-block-code”><code>/* Targets the primary list item container for checkboxes */ .page-id-538 .wp-block-coblocks-form .coblocks-form-checkbox-list li, .page-id-692 .wp-block-coblocks-form .coblocks-form-checkbox-list li, .page-id-688 .wp-block-coblocks-form .coblocks-form-checkbox-list li, .page-id-690 .wp-block-coblocks-form .coblocks-form-checkbox-list li { display: block !important; width: 100% !important; margin-bottom: 12px !important; box-sizing: border-box !important; float: none !important; clear: both !important; padding: 0 !important; text-indent: 0 !important; list-style: none !important; background: none !important; border: none !important; outline: none !important; } /* Target the checkbox input itself */ .page-id-538 .wp-block-coblocks-form .coblocks-form-checkbox-list li input[type=”checkbox”], .page-id-692 .wp-block-coblocks-form .coblocks-form-checkbox-list li input[type=”checkbox”], .page-id-688 .wp-block-coblocks-form .coblocks-form-checkbox-list li input[type=”checkbox”], .page-id-690 .wp-block-coblocks-form .coblocks-form-checkbox-list li input[type=”checkbox”] { display: inline-block !important; vertical-align: middle !important; margin-right: 10px !important; float: none !important; width: auto !important; height: auto !important; padding: 0 !important; } /* Target the label text next to the checkbox */ .page-id-538 .wp-block-coblocks-form .coblocks-form-checkbox-list li label, .page-id-692 .wp-block-coblocks-form .coblocks-form-checkbox-list li label, .page-id-688 .wp-block-coblocks-form .coblocks-form-checkbox-list li label, .page-id-690 .wp-block-coblocks-form .coblocks-form-checkbox-list li label { display: inline-block !important; vertical-align: middle !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; width: calc(100% – 40px) !important; min-height: 20px !important; line-height: 1.4 !important; padding: 0 !important; margin: 0 !important; font-size: inherit !important; color: inherit !important; text-align: left !important; } /* Styles for the submit button */ .page-id-538 .wp-block-coblocks-form .coblocks-form-submit-button, .page-id-692 .wp-block-coblocks-form .coblocks-form-submit-button, .page-id-688 .wp-block-coblocks-form .coblocks-form-submit-button, .page-id-690 .wp-block-coblocks-form .coblocks-form-submit-button { text-align: center !important; width: 100% !important; float: none !important; clear: both !important; } .page-id-538 .wp-block-coblocks-form .coblocks-form-submit-button input[type=”submit”], .page-id-692 .wp-block-coblocks-form .coblocks-form-submit-button input[type=”submit”], .page-id-688 .wp-block-coblocks-form .coblocks-form-submit-button input[type=”submit”], .page-id-690 .wp-block-coblocks-form .coblocks-form-submit-button input[type=”submit”] { width: 100% !important; max-width: 300px !important; box-sizing: border-box !important; padding: 12px 20px !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }</code></pre> <p>}</p> <p></p> <p>Any insight you can provide would be greatly appreciated. Thank you for your time!</p>

The page I need help with: [log in to see the link]