By default in Add-Ons Ultimate, 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. Use the first rule to enable a single column for mobile and tablets; use the second rule to implement four columns; or adjust as required:
This file contains hidden or 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 single column on mobile, tablets, etc **/ | |
| @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: 100%; | |
| } | |
| } | |
| /** Show 4 columns on mobile, tablets, etc **/ | |
| @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%; | |
| } | |
| } |
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%.
Here’s how to add your CSS: How to add CSS to your WordPress site