Lead collection popup troubleshooting - urgent

Store Design
, , , , , , , , , ,

Topic summary

A user is experiencing layout issues with an Omnisend lead collection popup on mobile devices. The checkboxes for options like “Hip & Joint” and “General Wellness” are stacking vertically instead of appearing in a single row as they do on desktop.

Attempted Solution:
A helper provided CSS code targeting the popup’s specific class to force a two-column layout on mobile using flexbox properties. The code was meant to be added to the base.css file with a media query for screens under 767px width.

Current Status:
The CSS solution didn’t work, likely because it relied on a specific section ID that doesn’t match the user’s implementation. Since Omnisend is an external app, the user cannot easily access or modify the underlying code structure.

Next Steps:
The helper suggested adding the custom CSS through Omnisend’s custom code option if available. The user has since changed the popup configuration, and the checkboxes are no longer visible for troubleshooting. The issue remains unresolved and requires the original popup to be restored for further diagnosis.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

I’m using Omnisend for the lead collection popup. In the mobile view, I need help troubleshooting the checkbox layout. I want the checkboxes to appear in a single row—just like they do on desktop. If that’s not possible, is it at least possible to reduce the line height between “Hip & Joint” and “General Wellness”?

You can check what I mean on our website. I’ll share the link below—please review it in mobile view.

Disclaimer: Please make sure to check this on a mobile device.

website: https://thetruthfultail.com/

Screenshot 2025-06-14 115059.png
Screenshot 2025-06-14 115059.png431×772 38.3 KB

2

In order to show two columns on Mobile then you need to paste the following code in the end of base.css file.

@media only screen and (max-width: 767px) {
.omnisend-form-684d0abf50692b4565082670-column-684d12f35a12d352e1148fb4 {
    justify-content: space-between !important;
    flex-direction: row !important;
}
}

Results:

TheScriptFlow_0-1749883718618.png
TheScriptFlow_0-1749883718618.png402×202 8.78 KB

3

@TheScriptFlow Sorry it’s not working, please help me to sort out this

4

Basically,

I am using the id of the section. That’s why it does’t seems to be work. So that’s seems to not work for you. Would you like to share the whole code of the popup section so that I update it and provide to you.

Thanks

5

@TheScriptFlow Sorry, I’m using an external app named omnisend for this, So I don’t know how to get the code, is there any possible way to sort this out.

6

If your app gave you option to add the custom code then paste the code in his custom code input field

7

@TheScriptFlow , can you please recheck the popup? I have changed the popup, so is there any way to sort it out? Sorry for the thing

8

I cannot see the check-boxes anymore. Would you like to revert it back so that I can take a look.

Thanks