1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Product Page
  5. Styles for Add-Ons Ultimate
  6. Change the number of radio/checkbox image columns on mobile devices
  1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Product Page
  5. Change the number of radio/checkbox image columns on mobile devices
  1. Home
  2. Knowledge Base
  3. WooCommerce Product Add-Ons Ultimate
  4. Change the number of radio/checkbox image columns on mobile devices

Change the number of radio/checkbox image columns on mobile devices

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:

/** 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

Was this article helpful?

Related Articles