Hi all,
I use the width setting on my ACF field to made the fields look better on backend but when I create or edit a post on small screen (Smartphone or Tablet) the inputs are too small.
I found how to force the width to 100% with media queries (CSS) but it’s not working on table reapeater field.
Do you know how I can change the repeater display from table to block if “small screen” ?
I assume I can use the prepare_field filter but I don’t know how to get screen data in PHP …
If possible, I also looking for a solution for gallery field which not display good too on small screen because of the side-data. If you have an idea …
thanks =)
Hey, did you ever get an answer on this? I’m trying to forced text input fields to 100% width in the admin with a media query, and nothing I’m doing will work.
There is not much you can to with repeaters displayed as tables because, well, they are tables. In order to do this you need to choose a different display, block or row. It may be possible to alter the way tables behave by altering the “display” property of the tables, rows, cells, etc, but I’m not sure.
Just an FYI – none of the ACF repeater options (table, block or row) work on a mobile platform where the viewport is smaller than 450px. You can tweak the css but it’s cumbersome and doesn’t work so well. A work around is to wrap the repeater field (under Wrapper Attributes) with a class and then set that class to scroll. For example – wrap the repeater with the class “scrollme” and then style that class as:
.scrollme {
overflow-y: auto;
padding: 10px 0;
}
