Codeinwp / woocommerce-product-addon

PPOM for WooCommerce
4 stars 4 forks source link

Mobile Responsiveness for Radio Switcher #203

Open AndreeaCristinaRadacina opened 11 months ago

AndreeaCristinaRadacina commented 11 months ago

Description

A user reported that the PPOM input is not responsive on mobile. I was able to replicate his issue not only on mobile but also when the container was smaller.

Ref - https://secure.helpscout.net/conversation/2446256733/396065?viewId=212385

Step-by-step reproduction instructions

  1. Go to the meta group
  2. Add a radio switcher
  3. Insert multiple options
  4. Check on the frontend

Screenshots, screen recording, code snippet or Help Scout ticket

image

It is also a bit visible on the demo - https://demo-ppom-lite.vertisite.cloud/product/radio-switcher-input/.

Environment info

No response

Is the issue you are reporting a regression

No

Soare-Robert-Daniel commented 2 months ago

In this case, we can redo the CSS for the switcher to allow better wrapping on small screens ( maybe using Grid instead of Flex ). Also, the marker can be just a simple toggle class for active status if the current way it works does not suit the changes.

Screenshot 2024-08-26 at 12 42 46