Responsive Checkbox columns layout

By: Dean Loh | Asked: 03/02/2024
ForumsCategory: General questionsResponsive Checkbox columns layout
Dean LohDean Loh asked 4 months ago
On desktop, my checkboxes are in two columns, on mobile, I would like them to be in one columns instead. Is there an option for that?
1 Answers
Faisal AhammadFaisal Ahammad answered 4 months ago
Hi, First add a custom CSS class such as "mobile-one-col" to the field settings like the following screenshot. custom class Now add the following CSS to the child theme style.css file or on the Appearnace → Customizer → Additional CSS to display the checkboxes in a single row on mobile devices. This setup will show two columns on the desktop and one column on mobile, as depicted in the screenshot below. @media all and (max-width: 568px) { .mobile-one-col .frm_opt_container { grid-template-columns: repeat(1, 1fr) !important; } } final output Give it a try, and let me know how that goes! 😄
Faisal AhammadFaisal Ahammad replied 4 months ago

Pastebin link for the code:

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