Mobile-friendly custom CSS for repeater field on small screens

By: Ruben Meerman | Asked: 01/29/2023
ForumsCategory: How-toMobile-friendly custom CSS for repeater field on small screens
Ruben Meerman asked 1 year ago
Is it possible to have two columns in repeater fields on small screens? I've got two columns working fine outside repeater fields, but not inside repeater fields, as you can see here: My skills are not up to writing custom CSS to make this work. Any help would greatly appreciated.
1 Answers
Victor Font answered 1 year ago

Repeaters are displayed using CSS grid. To change the two field side-by-side you need to add additional CSS to your style sheet at the appropriate media query break point for mobile devices. The css is .frm_section_heading > * { grid-column: span 6 / span 6; }

Ruben Meerman replied 1 year ago

Thank you Victor!

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community