ACF Accordion Error Css if set fields width %

Hi dinhcode,

Can you upload any screenshots with how it behaves and then what you’re trying to achieve?

Regards,
Bogdan

Old post, but I’m seeing what I think is the same as the author…
These two fields (Facebook / Instagram) has the width set to 50% in ACF. The accordion plugin messes with the margin between them.

Here is the same fields without the accordion field…

Not a big deal, but having more fields in row makes it look even worse. For example four fields with 25% width each.

Did some further investigation to this and just found the problem/solution…

ACF has the CSS styling for the fields like this:
.acf-fields > .acf-field { padding: 15px 12px; ... }
Using the accordion plugin nests the fields deeper, so the CSS will not target them.

The problem in this case is that the padding isn’t applied, so I added some CSS in my own custom file that I have loaded in the admin like this to get the same padding:

.acf-accordion-group.opened > .acf-field { padding: 15px 12px; }