By default, the checkbox, and radio image fields are shown as a single column on mobile devices. If you’d like to change the number of columns displayed on small devices, here’s some CSS to make the adjustments:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** Show 4 columns on iPad, Tablets **/ | |
| @media (min-width: 481px) and (max-width: 768px){ | |
| .pewc-radio-images-wrapper .pewc-radio-image-wrapper, .pewc-checkboxes-images-wrapper .pewc-checkbox-image-wrapper { | |
| width: 25%; | |
| } | |
| } | |
| /** Show 4 columns on Mobile devices **/ | |
| @media (max-width: 480px){ | |
| .pewc-radio-images-wrapper .pewc-radio-image-wrapper, .pewc-checkboxes-images-wrapper .pewc-checkbox-image-wrapper { | |
| width: 25%; | |
| } | |
| } |
The above code will make the section display 4 columns. You can adjust the number of columns, by changing the width value.
You only need to divide 100% by the number of columns you’d like. For example, 2 columns = 100/2 =50%.
The width should be set to 50%.
Here’s how to add your CSS: How to add CSS to your WordPress site