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?
Hi,
First add a custom CSS class such as "mobile-one-col" to the field settings like the following screenshot.
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;
}
}
Give it a try, and let me know how that goes! 😄
Pastebin link for the code: https://pastebin.com/hzayza5g
Please login or Register to submit your answer